Menú con imágenes que cambian en Blogger

Hace tiempo vimos cómo poner un menú con imágenes en Blogger, puedes consultar el tutorial en el siguiente enlace:

Menú con imágenes en Blogger

En esa entrada, compartí contigo un montón de botones sencillos para las primeras pruebas. Y hoy, vamos a ir un paso más allá. Vamos a crear un menú con efecto hover en Blogger. ¿Sabes lo que es el efecto hover?

Pasa el ratón por encima de esta imagen:

Imagen cedida por Madrid Bloguea

Exacto, el efecto hover no es otra cosa que un cambio que sucede cuando pasamos el ratón por encima, en este caso, la imagen cambia.

Así que vamos a ver como aplicar este efecto tan original a un menú con imágenes como el que vimos en la entrada que te enlazaba al inicio de esta entrada:

1.- Descarga el pack de botones que más te guste.

Descargar

Descargar

2.- En cada pack encontrarás 10 modelos de botones diferentes, si te fijas, dos son casi iguales y están etiquetados como Nombre del Botón 1 // Nombre del Botón 2. El primero es el que usaremos por defecto y el segundo el que aparecerá cuando nuestras visitas pasen el ratón por encima.

3.- Ahora hay que subirlos a una web de alojamiento de imágenes, tipo Picasa (Google Photos) o Dropbox. Vamos a necesitar la URL de cada botón y es muy importante que estén alojados en internet de manera pública, para que se vean sin problema. Picasa es mucho más rápido que Dropbox, pero puedes usar la que utilices habitualmente.

4.- El siguiente paso es el mismo que en la entrada que ya vimos. No mostraremos el gadget de páginas por defecto de Blogger, sino que crearemos nuestro propio menú, por lo que vamos a necesitar los enlaces a nuestras páginas o a la búsqueda por etiquetas que queramos mostrar. Puedes saber más de las búsquedas por etiquetas aquí:

Sácale partido a las etiquetas de tu blog

5.- Ahora que ya tienes los enlaces a tus páginas anotados y a mano, vamos a empezar a crear el código:

<div style="text-align: center;">
<table cellpadding="10px" cellspacing="10px">
<tbody>
<tr>

<td><a href="URL PÁGINA ENLAZADA"><img height="80px" onmouseout="this.src='URL BOTON 1';" onmouseover="this.src='URL BOTON 2';" src="URL BOTON 1" width="60px" /></a></td> 

<td><a href="URL PÁGINA ENLAZADA"><img height="80px" onmouseout="this.src='URL BOTON 1';" onmouseover="this.src='URL BOTON 2';" src="URL BOTON 1" width="60px" /></a></td> 


<td><a href="URL PÁGINA ENLAZADA"><img height="80px" onmouseout="this.src='URL BOTON 1';" onmouseover="this.src='URL BOTON 2';" src="URL BOTON 1" width="60px" /></a></td> 

<td><a href="URL PÁGINA ENLAZADA"><img height="80px" onmouseout="this.src='URL BOTON 1';" onmouseover="this.src='URL BOTON 2';" src="URL BOTON 1" width="60px" /></a></td> 
    

<td><a href="URL PÁGINA ENLAZADA"><img height="80px" onmouseout="this.src='URL BOTON 1';" onmouseover="this.src='URL BOTON 2';" src="URL BOTON 1" width="60px" /></a></td> 

</tr>
</tbody>   
</table>
</div>

Cada fragmento de código encerrado entre:

<td></td>

Es uno de tus botones. Tenlo en cuenta a la hora de añadir los enlaces de tus diferentes botones del menú.


6.- Estamos trabajando con una tabla en HTML, por lo que para modificar las propiedades de tu tabla, te será de gran utilidad consultar esta entrada:

Programar tablas en blogger

En este tutorial puedes ver cómo modificar el espacio entre tus celdas (cellpadding y cellspacing), eliminar alguna o añadir más. Dedícale tiempo a esta parte del código ya que será la que haga que tu menú se vea perfectamente alineado.


7.- Una vez que hemos añadido nuestros enlaces, tanto de páginas como de imágenes, prestando especial atención a la numeración de cada imagen, adaptaremos el ancho y el alto de cada una de ellas para que se vean perfectas:

height > alto de la imagen
width > ancho de la imagen

Puedes hacerlo en una entrada de prueba e ir viendo los cambios en Vista Previa. Así es mucho más sencillo que trabajar a ciegas. En Vista Previa no verás el efecto hover, por lo que otra opción, muy recomendable desde mi punto de vista, es tener un blog de pruebas donde ir aplicando los diferentes cambios y una vez quede tal y como quieres, incluir el código final en tu blog.


8.- Un ejemplo del código final, usando el pack de guirnaldas, sería similar a este:

<div style="text-align: center;">
<table cellpadding="10px" cellspacing="10px">
<tbody>
<tr>
<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://lh5.googleusercontent.com/-7d5Qy3SmWt0/U9N3C9jblbI/AAAAAAAAXYU/V_RyifbbAqc/w100-h124-no/HOME1.png';" onmouseover="this.src='https://lh6.googleusercontent.com/-GVRNy5xPl9w/U9N3DCj_k-I/AAAAAAAAXYI/GCHfNJD3bHU/w100-h124-no/HOME2.png';" src="https://lh5.googleusercontent.com/-7d5Qy3SmWt0/U9N3C9jblbI/AAAAAAAAXYU/V_RyifbbAqc/w100-h124-no/HOME1.png" width="60px" /></a></td> 

<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://lh6.googleusercontent.com/-Zji2lLtpWis/U9N3BK_5I8I/AAAAAAAAXXk/qVSCV9xSqTo/w100-h124-no/ABOUTME1.png';" onmouseover="this.src='https://lh6.googleusercontent.com/-9G5CTZuodCo/U9N3CensABI/AAAAAAAAXYo/0I3W6cpC4E8/w100-h124-no/ABOUTME2.png';" src="https://lh6.googleusercontent.com/-Zji2lLtpWis/U9N3BK_5I8I/AAAAAAAAXXk/qVSCV9xSqTo/w100-h124-no/ABOUTME1.png" width="60px" /></a></td> 


<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://lh4.googleusercontent.com/-xV8nQvEhh2s/U9N3BQwqi7I/AAAAAAAAXXs/ZrbN8Q990pM/w100-h124-no/CONTACTO1.png';" onmouseover="this.src='https://lh4.googleusercontent.com/-k8K5L7gZcNY/U9N3B35M9wI/AAAAAAAAXX8/Qhj0_GtvIQY/w100-h124-no/CONTACTO2.png';" src="https://lh4.googleusercontent.com/-xV8nQvEhh2s/U9N3BQwqi7I/AAAAAAAAXXs/ZrbN8Q990pM/w100-h124-no/CONTACTO1.png" width="60px" /></a></td> 

<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://lh4.googleusercontent.com/-bl8QZho8ZJ8/U9N3DdPGOxI/AAAAAAAAXYQ/3t7wSowpdKM/w100-h124-no/TUTORIALES1.png';" onmouseover="this.src='https://lh3.googleusercontent.com/-de8ja5xxo-0/U9N3DoFExLI/AAAAAAAAXYY/G5kkXnIM3Zs/w100-h124-no/TUTORIALES2.png';" src="https://lh4.googleusercontent.com/-bl8QZho8ZJ8/U9N3DdPGOxI/AAAAAAAAXYQ/3t7wSowpdKM/w100-h124-no/TUTORIALES1.png" width="60px" /></a></td> 
    

<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://lh6.googleusercontent.com/-x4NnTCOEJqU/U9N3B5UG5cI/AAAAAAAAXYk/O0iw6jtd9Ds/w101-h125-no/DESCARGAS1.png';" onmouseover="this.src='https://lh3.googleusercontent.com/-6g3ZoDiBnQ4/U9N3CUjtzXI/AAAAAAAAXYc/CYaHsk3EPvw/w100-h124-no/DESCARGAS2.png';" src="https://lh6.googleusercontent.com/-x4NnTCOEJqU/U9N3B5UG5cI/AAAAAAAAXYk/O0iw6jtd9Ds/w101-h125-no/DESCARGAS1.png" width="60px" /></a></td> 


</tr>
</tbody>   
</table>
</div>

9.- Que se vería así:

10.- Para añadir el código, una vez programado, a tu blog, solo tienes que añadir en Diseño un nuevo gadget HTML/Javascript, copiarlo y moverlo donde quieras que aparezca. Para colocarlo debajo de la cabecera puedes consultar de nuevo la entrada del menú de imágenes y encontrarás el paso a paso de cómo hacerlo al final del tutorial:

Añadir un menú con imágenes en blogger

¿Te animas a añadir un menú de este tipo a tu blog? 

Ten en cuenta que puede aumentar un poco el tiempo de carga, ya que añades dos imágenes diferentes por botón en vez de una y Blogger tiene que interpretar el efecto hover al pasar el cursor. 

¡Pero el resultado es de lo más original! 

Si lo haces, déjame el enlace a tu blog en comentarios ¡que me encantará ver cómo ha quedado!

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥