Menú con imágenes que cambian en Blogger

agosto 02, 2014

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.







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í:







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 1width="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 1width="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 1width="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 1width="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 ♥






Te encantará:

10 pensamientos ¡falta el tuyo! ;)

  1. Buenísima esta estrada Celia, cuando tenga un poco de tiempo, diseño la barra y aplico tu tutorial, aver que tal queda en el blog ;).
    Por cierto muchas de las cosas que he aprendido de html ha sido gracias a tu blosg, muchas gracias eres una crack!! Aqui te dejo el link, por si quieres verlo! muuuack
    http://pompomfiesta.blogspot.com/

    ResponderEliminar
  2. Gracias guapa.
    Qué manera de currárselo en pro de los demás. Eres muy generosa.
    Y descansa un poco, que después, durante un tiempo, no vas a tener ni tiempo de mirarte los pies :-)
    Besosssss

    ResponderEliminar

  3. gracias, yo voy muy poquito a poco no tengo idea, gracias.bsos

    ResponderEliminar
  4. ¡Ya me contaréis qué tal ha quedado!

    Feliz finde, chicas :)

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. Hola Celia! Estoy con ello y sólo me aparece el primer botón, sólo he hecho 3, el rollover funciona pero no salen el resto de botones, lo puedes ver aquí: BLOG DE PRUEBAS

    He copiado el código tal cual y he subido las imágenes a TinyPic, incluso he probado con el código de los banderines, que sale perfecto cuando lo instalo pero en cuanto cambio los enlaces y las medidas del los botones sólo sale el primer botón, he repasado el código varias veces por si había algo que he hecho mal, pero nada, lo he intentado varias veces no lo entiendo... A ver si puedes ayudarme...

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      En el blog que me enlazas no veo nada... ¿puedes copiarme aquí el código final que estás usando, ya con tus enlaces, para comprobarlo?

      ¡¡Gracias!!

      Eliminar
  8. Blogger no me deja pegar aquí el HMTL, te envío un correo! ^_^

    ResponderEliminar
  9. estoy empezando a perzonalizar el blog quiero tenerlo listo para llenarlo de post!
    he estado trabajando en el 2 dias y me esta encantando
    todo lo que he hecho es siguiendo tus tutoriales asi que muchisimas gracias por todos
    espero que sigas subiendo mas jeje! :) te escribo desde durango mexico saludos
    aqui esta del blog :)
    http://lovelyinblue.blogspot.mx/

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.