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 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>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9O_DjT4TDntVZHNmDnhlfzoy-F98breMMmWcHXsZ0ITSLz8xgqTZl6uQjpCAf6kRDsI29QyKfdJQz1e1C8WSQ-9QFx-h3dziyvgvGJuIhz7mlZbQ6Bq-ELNmsjA2kNYG2OKLoyaBlzoS/w100-h124-no/HOME1.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzJlAEayNeZF4IxqoEN-uRb9ChjmfFK6KjUShBd4dNtFikE7eTq2sWL6NRjuEHQjTsPU_h2nSjBZhUbepEq4S56fqJqDNDIs2bdnz_opV_TnN7rq5DpYcgRlykQ4j7GLGGzxvFbg0LGtl/w100-h124-no/HOME2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9O_DjT4TDntVZHNmDnhlfzoy-F98breMMmWcHXsZ0ITSLz8xgqTZl6uQjpCAf6kRDsI29QyKfdJQz1e1C8WSQ-9QFx-h3dziyvgvGJuIhz7mlZbQ6Bq-ELNmsjA2kNYG2OKLoyaBlzoS/w100-h124-no/HOME1.png" width="60px" /></a></td>
<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2eWK99PY0UvvZsQPwcU0kW4abr4gleO8i0lwRrmr6O8NHFPt4b-Jq_ljl4M76pzivqD8EJW4Rm-t1wtFFIn_4SKTGiGXQC5-nOOMF1F2bY_k9lvjmtxxn5HWaBq9PhoeTfK2KgcyhoQ7/w100-h124-no/ABOUTME1.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFzV3aekQVySWvJTBlt_09P-HVmWiXGYHh4byrlRpJ9HsJTgxzs57FmR75GZaWqZ65sivn-iAX4DYQT304FGMMA4eLgfW8nwSIexnTcKbVWExsjud5IvuRYIBDbNZWif13K9KJiWtFMUQE/w100-h124-no/ABOUTME2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2eWK99PY0UvvZsQPwcU0kW4abr4gleO8i0lwRrmr6O8NHFPt4b-Jq_ljl4M76pzivqD8EJW4Rm-t1wtFFIn_4SKTGiGXQC5-nOOMF1F2bY_k9lvjmtxxn5HWaBq9PhoeTfK2KgcyhoQ7/w100-h124-no/ABOUTME1.png" width="60px" /></a></td>
<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrg1-AdO1Rv4bI7leGigdn3PKg8qF1Fbg7kB-XNzw3EXB5LYLfW0dCvWw_iC7lhYC1xh3JPXfJXPZcLjcBBx66FCqe6-jPTik7v6KnmLdGOB_jWRjBq2aoOXlobRgxU00_Cyu38axO5D7N/w100-h124-no/CONTACTO1.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgubgOxZRMYzHH09XEq5FKGpdL1MOzipcldvuIY0JEyoUIPFTfbBmzZa4M4cxkYhgN-DOzvIuFEPoRDRfGGDFgg-ktlpfgcK2aN5E8v3cpMQpTyGE6NdqG0Wgm97UunsM0UPLqVhTjoSQTy/w100-h124-no/CONTACTO2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrg1-AdO1Rv4bI7leGigdn3PKg8qF1Fbg7kB-XNzw3EXB5LYLfW0dCvWw_iC7lhYC1xh3JPXfJXPZcLjcBBx66FCqe6-jPTik7v6KnmLdGOB_jWRjBq2aoOXlobRgxU00_Cyu38axO5D7N/w100-h124-no/CONTACTO1.png" width="60px" /></a></td>
<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KerPI6fATqiweuBZOLnKJ8skY4AGG5pJ252h-4dFGe2fDocJ5A4lNuAGB8WxlCpR5LlGL5h2BZZvJjMqWeatJvMjtVNrTBgsbFh-A_Ffbkfhl7AuofgesrF9eL82ITu3O3AGJD8m2IYX/w100-h124-no/TUTORIALES1.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9wAdJe3pezZJw93wxa4uKThqrL8JBedEtHERwue6qAQPHhatMezFilLJzDuAy6ro4qJcAYIzdO399zsw707llNT8_l6sWJTYSUkoLvkB8LfPQEfRUmao9QgyCJcjtaTcYB-0P2ph4K6_L/w100-h124-no/TUTORIALES2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KerPI6fATqiweuBZOLnKJ8skY4AGG5pJ252h-4dFGe2fDocJ5A4lNuAGB8WxlCpR5LlGL5h2BZZvJjMqWeatJvMjtVNrTBgsbFh-A_Ffbkfhl7AuofgesrF9eL82ITu3O3AGJD8m2IYX/w100-h124-no/TUTORIALES1.png" width="60px" /></a></td>
<td><a href="https://www.elperrodepapel.com"><img height="80px" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEr2nrzU7F7BO458bzvNDWdyhcAe9vnbmbkBvmk95QcS7JcclhY9d9-w-OLk0i32xuXUMHvjQsbyMm-xl9Uw1Es3o2hHgH9tGh0fWmcaUIyQI6GiCZoCGXTNaZJrmwQ3RtW885igGhBqK/w101-h125-no/DESCARGAS1.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV-vBUN2_twgnrSZK91yR-_wvEs0Hl-XFzqySWcNd6T1Y16l8322-_6720_UfpSLD2a3YR5_90D3cGBMrCIERRLI4FIYs2AZIgUSPyxqms1lO_KcR9qMOhj2CXs01fqX1iUOJPagLDmTQU/w100-h124-no/DESCARGAS2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEr2nrzU7F7BO458bzvNDWdyhcAe9vnbmbkBvmk95QcS7JcclhY9d9-w-OLk0i32xuXUMHvjQsbyMm-xl9Uw1Es3o2hHgH9tGh0fWmcaUIyQI6GiCZoCGXTNaZJrmwQ3RtW885igGhBqK/w101-h125-no/DESCARGAS1.png" width="60px" /></a></td>
</tr>
</tbody>
</table>
</div>
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!
Gracias guapa.
ResponderEliminarQué 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
ResponderEliminargracias, yo voy muy poquito a poco no tengo idea, gracias.bsos
¡Ya me contaréis qué tal ha quedado!
ResponderEliminarFeliz finde, chicas :)
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola 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
ResponderEliminarHe 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...
¡Hola guapa!
EliminarEn 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!!
Blogger no me deja pegar aquí el HMTL, te envío un correo! ^_^
ResponderEliminarestoy empezando a perzonalizar el blog quiero tenerlo listo para llenarlo de post!
ResponderEliminarhe 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/