El Perro de Papel Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Tutorial Blogger: imagen detrás del menú en Blogger



Uno de los tutoriales más visitados del blog es: Cómo personalizar el menú de páginas de blogger
Puedes leerlo aquí: Repasar el Tutorial
En ese tutorial vemos como personalizar el código que nos da blogger paso a paso, analizamos cada fragmento y vamos poniendo los colores y tipos de letra a juego con el resto del diseño. Y una de las dudas que me han preguntado tanto en el blog como por email es:¿Cómo pongo una imagen detrás del menú de páginas?

Vamos a ver como hacerlo en el menú sencillo que trae por defecto blogger, verás que es muy fácil darle forma. Además, he preparado algunas imágenes para que puedas comprobar cómo funciona y hacer las prácticas que necesites antes de instalar la versión definitiva en tu blog.
Empezamos a trabajar con un menú sencillo, como éste:


PRIMERO: LOCALIZAMOS EL CÓDIGO DEL MENÚ


Entramos en Plantilla > Editar HTML. Vamos a localizar el código del menú en nuestra plantilla.
Hacemos click en cualquier parte dentro de la caja de código y pulsamos Control + F a la vez para abrir el buscador interno de blogger. Buscamos:
.tabs-inner
Y encontrarás:
Tabs
-----------------------------------------------
.tabs-inner {
height:35px;
background: url(#) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
border-top: 5px solid #eeeeee;
border-bottom: 5px solid #eeeeee;
}
.tabs-inner .widget ul {
background: transparent;
_background-image: none;
border-bottom: 0px solid #000000;
margin-left: 0px;
margin-right: 0px;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px "Raleway", Tahoma, Helvetica, FreeSans, sans-serif;
text-align: center;
text-transform: uppercase;
color: #E0A2A8;
background-color: transparent;
border-radius: 30px 30px 0px 0px;
border-left: 0px solid #ffffff;
border-right: 0px solid #000000;
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
font: normal normal 18px "Raleway", Tahoma, Helvetica, FreeSans, sans-serif;
text-align: center;
text-transform: uppercase;
color: #89D2D8;
background-color: transparent;
text-decoration: none;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
Centrar Páginas
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;} 
Este código está personalizado siguiendo el tutorial que te enlacé al principio sobre Cómo personalizar el menú de páginas de blogger. En este tutorial vamos a centrarnos en poner una imagen de fondo, por lo que si quieres aprender a personalizar tu menú te aconsejo consultar primero el anterior tutorial.
La línea que nos interesa para añadir nuestra imagen de fondo es la que te he marcado en negrita:
background: transparent; url("#")no-repeat top left;
Es el fondo del menú. En este caso yo lo tengo transparente y sin imagen, por eso aparece la almohadilla ("#") donde debería ir la URL de la imagen de fondo.SEGUNDO: ELEGIMOS LA IMAGEN QUE VAMOS A USAR

He diseñado un total de 10 imágenes para que empieces a practicar. Las medidas son: 1082px x 52px
Puedes descargarlas del siguiente enlace:
Imágenes de fondo para mi menú
Y una vez hayas elegido la tuya, necesitas subirla a tu cuenta de dropbox, picasa, google fotos o la plataforma que uses para subir tus fotos a internet y usar la URL para ponerlas en tu blog.
Yo voy a usar Picasa / Google Fotos. Todas las cuentas de blogger tienen por defecto una cuenta asociada donde se alojan las imágenes del blog así que tú también tienes la tuya.
1.- Entra en: Google Fotos (click AQUÍ) registrada con tu cuenta del blog (GMAIL).
2.- Pincha en: Inicio > Fotos (arriba a la izquierda)


3.- Ahora selecciona: Más > Álbumes


4.- Cuando estés dentro de tu página de álbumes haz click en Subir Fotos (a la derecha al lado del Más de antes).
5.- Sube la imagen que hayas elegido para el fondo de tu menú y ponle el nombre que quieras a tu álbum.


Pincha en Listo abajo a la izquierda.
6.- Si te preguntan si quieres compartir el álbum, dí que no o se compartirá en tu perfil de Google Plus.
7.- ¡Ya tienes tu imagen subida! Ahora pinchamos sobre ella para verla a tamaño real y poder coger la URL.

Click encima de ella con el botón derecho del rato: Copiar URL de la imagen.
¡Ya tienes tu enlace!
Ahora a terminar de darle forma a tu menú de páginas.Añadir la imagen elegida como fondo al menú

Volvemos al código Tabs y nos quedamos con el primer fragmento. Este:
.tabs-inner {
height:35px;
background: url(#) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
border-top: 5px solid #eeeeee;
border-bottom: 5px solid #eeeeee;
}
Y pegamos la URL de nuestra imagen donde está la almohadilla (#).
La mía quedaría así:
.tabs-inner {
height:35px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
border-top: 5px solid #eeeeee;
border-bottom: 5px solid #eeeeee;
}
Y de momento se vería así:

Vamos a desglosar el código para conseguir que nuestra imagen se vea perfecta.
Primero eliminamos los bordes que habíamos añadido al menú:
.tabs-inner {
height:35px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
border-top: 5px solid #eeeeee;
border-bottom: 5px solid #eeeeee;
}
Así:
.tabs-inner {
height:35px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
}
Resultado:

Siguen sin verse los picos de abajo, ¿adivinas por qué? El menú de mi ejemplo tiene un valor que fija la altura en 35px.
Exactamente está aquí:
.tabs-inner {
height:35px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
}
Y esta imagen es más alta, como te comenté al principio mide 56 px de alto. Así que vamos a aumentar el valor height (altura) hasta conseguir que se vea entera:
.tabs-inner {
height:56px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
}
Resultado:

¡Ya está! Hemos conseguido que se vea entera... pero las letras del menú ahora quedan demasiado arriba. Vamos a solucionarlo añadiendo un espacio superior (padding-top):
.tabs-inner {
height:56px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
padding-top: 4px;
}
Resultado:

Si te fijas, aunque ya se ve la imagen entera por arriba y abajo y las letras están centradas, aparece cortada en los laterales. Eso es porque el ancho de la imagen es distinto al de nuestro blog.
El ancho de la imagen era: 1080px
Y el de tu blog puedes verlo en:
Plantilla > Personalizar > Ajustar ancho > Blog completo

El ancho de mi blog de pruebas es 1070, por eso no aparece la imagen entera.
Así que tengo dos posibles soluciones.ADAPTAR LA IMAGEN DE FONDO AL ANCHO DEL BLOG

Solución Uno: la fácil
Aumentar el ancho del blog hasta que se vea la imagen de fondo del menú completa:


En mi caso tendría que aumentar hasta 1130px en ancho del blog completo, ya que tanto nuestro header como nuestro menú tienen un margen alrededor que hay que sumar al ancho real.
Solución Dos: La más dificililla
Eliminar o modificar los margenes derecho e izquierdo:
Mi código actual tiene un solo margen izquierdo marcado.
.tabs-inner {
height:56px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: -5px;
margin-bottom: 0px;
padding-top: 4px;
}
Lo pongo a 0 y añado el mismo valor al margen derecho (margin-right). Así:
.tabs-inner {
height:56px;
background: url(https://lh3.googleusercontent.com/-r-u1PBEz7-g/VPRdTZWmgtI/AAAAAAAAhRI/meshhQ-aDbE/w1083-h57-no/menu_bg_picoscyan.png) top no-repeat;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 4px;
}
Tienes que añadir tu margin-right justo debajo de margin-left, como lo tengo yo en el código de arriba.
Ahora mi resultado es:


Jugando con los margenes (margin) y diferentes tamaños de imagen puedes colocar tu menú donde quieras, solo es cuestión de práctica y usar siempre para las pruebas un Blog de Pruebas con la misma plantilla que el original. Así cuando el resultado sea el que quieres solo tienes que exportar tu plantilla e importarla en tu blog público.¿Qué me dices? ¿Te animas a intentarlo?

Sigue despacio los pasos, no te saltes nada y ten paciencia.

Al final lo conseguirás. Y el resultado merecerá la pena.




Seguramente tengas que adaptar los números a tu blog, pero no pasa nada, es cuestión de tiempo y práctica.





Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

internet blog blogger para dummies ...

Tutorial Blogger Dummies: La Plantilla HTML

Para no tener ni idea de cómo hacer un blog de blogger cuando empezamos esta serie de tutoriales, tu blog no está nada mal ¿no crees? Limpio, profesional, cuidado... si has seguido todos los pasos que hemos ido viendo, puedes estar muy satisfecha del trabajo y horas invertidas en poner tu blog bien bonito tu sola. Puedes repasar lo que llevamos visto aquí: VISTO HASTA AHORA: Presentación. Tu Idea. ...

internet blog intermedio ...

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

internet blog tblog ...

Consultoría Blogger - Resolviendo dudas de tutoriales 4

Hola a todos!!! Ya estamos de nuevo a final de mes y vengo a resolver las dudas de tutoriales antiguos que os han surgido y que se habían quedado pendientes de resolver. Como personalizar el texto citado de Blogger Este es el código que Celia proporcionaba para poner el texto citado con diferentes características: .post blockquote{ font-family: "Poiret One", cursive; font-size: 20px; c ...

internet avanzado blog ...

Tutorial Blogger: adaptar menú a versión móvil

No me gusta nada la versión móvil, con lo que me ha costado dar con la portada y el diseño ideal... y se va todo al garete al activar la plantilla para dispositivos móviles. He tardado en decidirme pero claro, el tema de que Google vaya a tener tan en cuenta ésto para el posicionamiento pues... como que impone un poco. Así que finalmente me he decidido a activarla, prescindir de la portada y perso ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

general diseño de blogs

Como poner un fondo tras el menú de páginas

Hace poco alguien me escribió para preguntarme cómo en el blog prediseñado número ocho puedo hacer que tras la barrita de pestañas, se vea ese efecto como de lazo o cinta: La idea la saqué del blog de Lauren Conrad, que tiene una barrita con efecto cinta en la parte superior: Es muy cómodo además porque nos permite ponerlo de fondo, y así poder luego añadir o quitar páginas o pestañas como haríamo ...

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

internet blog intermedio ...

Personalizar el enlace a los comentarios de Blogger

Hoy quiero compartir contigo un tutorial muy sencillito pero que a mí, personalmente, me encanta y, de hecho, en mis últimos diseños personalizados para Blogger estoy usando mucho. Creo que es uno de esos detalles que demuestran el cariño que ponemos en nuestro blog. Vamos a ver como personalizar el enlace a los comentarios de Blogger. El footer que aparece por defecto con la plantilla simple de B ...

internet blog intermedio ...

Como personalizar el texto citado de Blogger

¿Sabes que Blogger permite marcar nuestros textos citados para diferenciarlos del resto del texto de la entrada? ¿Y qué podemos personalizar, desde nuestra plantilla HTML, el formato de nuestro texto citado? Pues sí, es el tema que vamos a tratar hoy. Otro de esos pequeños detalles que marcan la diferencia y tardamos dos minutillos en configurar.Citar un texto en Blogger Primero vamos a ver como a ...