Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Sencillo menú vertical "margaritas" y "pez payaso"

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...

Menu para el blog, menu blogger, ayuda blogger


Diseño>añadir gadget (elemento de página)>html-javascript






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.

Aurora dice...

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.

Jaime Trujillo Escobedo dice...

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) ;).

Aurora dice...

Voy a experimentar ahora mismo pero tiene una pinta buena... Muchas gracias!!

Jaime Trujillo Escobedo dice...

Gracias a ti, Aurora ^^.

Pela dice...

Yo hiceesto con un programa, el PaintShopPro 7 ;).

Jaime Trujillo Escobedo dice...

Cierto Pela, incluso podríamos hacerlo usando Photoshop. ¡Saludos!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo