Aquí te traigo dos atractivos menús que podrás instalar fácilmente en tu blog. Únicamente sigue los pasos de la entrada y en poco tiempo podrás tener unas margaritas o un pez payaso decorando tus enlaces...



Para instalar el menú "margaritas" pega este código:
<center><img style="border: 2px solid #C14E09;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTn7GgsxRB90dE6mZm_x45yHqlRMBb_sujeZU3LbQMxHxUFAi-fJuLIqo4Iwxbidh0MQAfMiqhPUVpTi3AAaowt1P9D-najtMOXj9HA87hLn2Vh9YC5UPhwSU8QPhw5W_jDuMl0eFM1Cs/s320/blmargaritas.png" width="168" border="0" usemap="#blmenu_margarita" />
<map id="blmenu_margarita" name="blmenu_margarita" >
<area shape="rect" coords="33,4,130,39" alt="Inicio" title="inicio" href="URL PAGINA INICIO" />
<area shape="rect" coords="21,68,143,102" alt="Contacto" title="Contacto" href="mailto:DIRECCION CORREO" />
<area shape="rect" coords="22,125,143,160" alt="Suscribir" title="Suscribir" href="ENLACE SUSCRIBIR" />
</map></center>
Reemplaza URL PAGINA INICIO con la dirección de tu blog, DIRECCION CORREO con tu dirección de correo electrónico y ENLACE SUSCRIBIR conla dirección del Feed de tu blog.
Para la URL del feed puedes utilizar la de feedburner (en caso tenerla) o la que te muestro a continuación:
http://www.elbalcondejaime.blogspot.com/feeds/posts/default
No olvides sustituir elbalcondejaime por el nombre de tu blog.
Para instalar el menú "pez payaso" pega este código:
<center><img style="border: 2px solid #C14E09;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTn7GgsxRB90dE6mZm_x45yHqlRMBb_sujeZU3LbQMxHxUFAi-fJuLIqo4Iwxbidh0MQAfMiqhPUVpTi3AAaowt1P9D-najtMOXj9HA87hLn2Vh9YC5UPhwSU8QPhw5W_jDuMl0eFM1Cs/s320/blmargaritas.png" width="168" border="0" usemap="#blmenu_payaso" />
<map id="blmenu_payaso" name="blmenu_payaso" >
<area shape="rect" coords="33,4,130,39" alt="Inicio" title="inicio" href="URL PAGINA INICIO" />
<area shape="rect" coords="21,68,143,102" alt="Contacto" title="Contacto" href="mailto:DIRECCION CORREO" />
<area shape="rect" coords="22,125,143,160" alt="Suscribir" title="Suscribir" href="ENLACE SUSCRIBIR" />
</map></center>
Rellena el menú siguiendo las instrucciones citadas anteriormente y guarda el gadget para terminar.
Hola, el otro día Gema de Gemablog sacó este post: http://gemablog-.blogspot.com/2010/04/generador-de-mapeado-en-imagenes.html#comments . Leyendo este tuyo me surge una duda que el otro día le trasladé a ella y no me supo contestar. Tampoco Oloblogger. La duda es si se crea un mapeado sobre una imagen, ¿cómo hacer para que al pasar el ratón por encima de los enlaces/links estos se resalten, o cambien de color, por ejemplo?
Gema me dijo que no puede hacerse mediante mapeado pero le pregunté cómo podría hacerse y ya no me contestó. A ver si tengo suerte y tú puedes darme alguna indicación. Muchas gracias.
Hola Aurora. Estos menús han sido construídos gracias al aporte de Gem@.
Ella tiene toda la razón: con un mapeado no será posible realizar el efecto "hover". Pero tranquila, existe otra forma de hacerlo.
Se trata de un enlace con imagen y con los atributos onmouseover y onmouseout atribuídos.
Utiliza el siguiente código:
<a href="DIRECCION DE TU PAGINA"><center><div align="center" onmouseover="this.style.backgroundPosition='0px -33px';" title="Clic para leer la privacidad" style="margin: 11px auto; background: transparent url(URL IMAGEN EN SPRITE) no-repeat scroll 0px 0px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: pointer; height: 35px; width: 200px;" onmouseout="this.style.backgroundPosition='0px 1px';"></div></center></a>
Reemplaza URL IMAGEN EN SPRITE por la dirección de una imagen "doble", es decir: un sprite. Aquí puedes ver un ejemplo.
Una vez tengas la imagen o el icono, tan solo será necesario cambiar los píxeles que le aportarán la posición "perfecta" a la imagen que debe aparecer al pasar el cursor (de manera que el cambio de una imagen a otra no sea lo más rápido posible) ;).
Voy a experimentar ahora mismo pero tiene una pinta buena... Muchas gracias!!
Gracias a ti, Aurora ^^.
Yo hiceesto con un programa, el PaintShopPro 7 ;).
Cierto Pela, incluso podríamos hacerlo usando Photoshop. ¡Saludos!