Menú horizontal con descripción del link

21 de septiembre de 2009 44 comentarios ,
Este es un menú de lo más sencillo, es simple pero tiene una característica muy peculiar, que al pasar el mouse sobre el link se muestra arriba de él una descripción del enlace. Puedes ver un ejemplo en este blog de pruebas, busca el menú que dice 'MENÚ CON LINKS DESCRIPTIVOS', pasa el mouse por encima de algún enlace y verás arriba de él una breve descripción.

Para ponerlo en tu blog sólo entra a Diseño > Elementos de la página > Añadir gadget, selecciona HTML/Javascript y ahí pega esto:
<p align="center"><b>
<span id="link_msg_show"></span>
<br/>
<br/>
<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto 1</span></a> |

<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto 2</span></a> |

<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto 3</span></a>

Cambia los datos que están en color rojo y listo. Si quieres agregar más enlaces añade esto después de <br/>
<a href="URL del enlace"><span
onmouseout="link_msg_show.innerHTML=''" onmouseover="link_msg_show.innerHTML='Descripción del enlace'">Texto</span></a> |

Arrastra ese elemento abajo de la cabecera del blog y podrás tener un sencillo pero peculiar menú con enlaces descriptivos.


44 comentarios en:

" Menú horizontal con descripción del link "

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hola Potro.
    Estrenando nuevo "Rostro" para el blog.
    Éxito!

    Saludos.
    Jpz.-

    ResponderEliminar
  3. Hola Jpz,

    Gracias, no quería pero me vi forzado a hacerlo dado que mi plantilla se veía fatal en IE y ya me había dado muchos dolores de cabeza.
    Espero les guste =)

    Saludos.

    ResponderEliminar
  4. Potro,queria ver si me podias poner mi banner de 460x60 en la cabezera de tu blog,queria ver si ademas podias poner por al menos mi mini boton,gracias,pasa por mi blog ahi tenes todos mis Banners

    ResponderEliminar
  5. Muchas felicitaciones de verdad :D.

    Se ve muy la ciudad.

    Saludos.

    ResponderEliminar
  6. Hola Emanuel Martinez,

    Ese banner lo tengo reservado para poner un banner cambiante, en cuanto lo ponga solicitas el tuyo y con gusto lo pongo.

    Saludos.

    ResponderEliminar
  7. Hola pepe,

    Muchas gracias, qué bueno que te gustó cómo quedó =)

    Saludos.

    ResponderEliminar
  8. Gracias potro!!y me olvide de decirte que te quedo re bien la plantilla nueva!!

    ResponderEliminar
  9. Gracias, qué bueno que te gustó la plantilla!

    ResponderEliminar
  10. epaa, se vino un cambio importante en el blog, quedo muy bueno :), saludoss

    ResponderEliminar
  11. Hola Ezequiel,

    Me alegra que te guste la nueva imagen. Yo igual odio IE, pero mientras haya gente que lo use (muy pocos por suerte) tendremos que seguir trabajando para que se vea bien en ese navegador.

    Saludos.

    ResponderEliminar
  12. si, lamentablemente a mi no me aparecen las imagenes swf, y tengo todo instalado, pero bueno, saludoss

    ResponderEliminar
  13. ¡¡¡¡Gracias Potro!!!!! tu explicacion me animo a modificarlo y funciona a la perfeccion, solo que obiasta un detalle, que hay que hacer entradas, (como pag, estaticas) para agregarlos en sección Url, por lo demas te escribó gracias.

    ResponderEliminar
  14. Hola SacroReyPablo,

    Es que no todos lo usan para enlaces de páginas estáticas, por eso no hice la referencia, pero gracias por la observación.

    Saludos!

    ResponderEliminar
  15. Hola potro si quiero que algun enlace se abra en otra ventana que hago

    ResponderEliminar
  16. Hola Alex,

    Después de la URL del enlace deja un espacio y pon target="_blank"
    Con eso se abrirá en otra pestaña, puedes ver más información al respecto en el siguiente enlace:
    Abrir links en otra ventana

    Saludos.

    ResponderEliminar
  17. HOLA POTRO MUY BUENO EL MENU TENGO UNA CONSULTA COMO HAGO PARA SUBIR MAS ENTRADAS AL MENU PUEDO SUBIR UNA SOLA PEGO LAS URL SEGUIDA A LA PRIMERA PERO NO ME REDIRECCIONA A LAS DEMAS SOLO A LA PRIMERA ME EXPLICO?
    UNA CONSULTA COMO HAGO PARA PONER UN BANNERS CAMBIANTE MUCHAS GRACIAS MUY BUENOS LOS TRUCOS TE FELICITO

    ResponderEliminar
  18. Es porque estás usando la URL de la entrada, no de las etiquetas.
    Te recomiendo que a cada entrada le pongas una etiqueta, por ejemplo Policiales, y en el menú pongas la URL de la etiqueta, no de la entrada.
    Por ejemplo, la URL de la etiqueta policiales sería así:
    http://www.lapazinforma.com.ar/search/label/Policiales

    De esa forma cuando alguien haga click en esa etiqueta se abrirán todas las entradas que tengan esa etiqueta, y no sólo una entrada.


    Para el banner cambiante usa este tutorial:
    http://ciudadblogger.com/2009/04/banner-cambiante.html
    Saludos.

    ResponderEliminar
  19. MUCHAS GRACIAS AMIGO SOS UN MAESTRO PEGATE UNA VUELTA PARA VER COMO QUEDO

    ResponderEliminar
  20. una pequeña consulta amigo el menu funciona al a perfeccion pero me aparece un cuadro que dice mostrando las entradas con etiqueta" como puedo hacer para que no aparesca mas ese recuadro

    ResponderEliminar
  21. Hola LA PAZ INFORMA,

    Te dejo el enlace para que sepas cómo eliminar ese mensaje:
    http://ciudadblogger.com/2009/07/ocultareliminar-el-mensaje-mostrando.html

    Saludos.

    ResponderEliminar
  22. MUY BUENO AMIGO ME SIRVIO MUCHO MUCHASG RACIAS TE DEJO SALUDOS AGUANTE CIUDAD BLOGGER MUY BUENOS CONSEJOS

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

    ResponderEliminar
  24. Hola Potro!, utilice tu menú!, queda muy bueno, así que muchas gracias!
    Ahora te queria preguntar si conoces algún sitio,que me brinde la dirección de URL, para cargar al menú, dado a que necesito cargar una ficha técnica de mi equipo y no se como hacerla y colgarla en el menú.
    Desde ya muchas gracias!!

    ResponderEliminar
  25. Hola EL 9,

    No sé si te he entendido bien, pero podrías hacer la ficha técnica del equipo en una entrada de Blogger y luego la URL de esa entrada la puedes usar para el menú.

    Saludos.

    ResponderEliminar
  26. Esta bien, pero como obtengo la url de mi entrada?( Soy nuevo en esto):)
    Si, genero una entrada me quedaría siempre visible y cuando vaya al menú se verá lo mismo, nuevamente?
    Muchas gracias por tus respuestas! gracias por tu tiempo

    ResponderEliminar
  27. Hola EL 9,

    Será más fácil si usas la nueva característica de Blogger que es crear páginas estáticas (como lo que quieres).
    Sólo ve a Creación de entradas y luego click en Editar páginas, ahí podrás hacer la página de la ficha técnica.
    Esa página no será visible en el resto de tus entradas, sólo cuando hagas click en el menú donde lo pongas.
    Hazla, cuando la publiques te dará la opción de mostrar el enlace desde un menú que ellos mismos incorporarán por ti.

    Saludos.

    ResponderEliminar
  28. Hola...Me gusta tu blog... Cómo hago para tener el formulario de comentario numerado y siempre visible?Por favor, responder pronto.Gracias.

    ResponderEliminar
  29. Hola Stella Contramaestre,

    Para que los comentarios aparezcan debajo de cada entrada como aquí lee esta entrada y elige la opción 3.
    Para saber cómo numerar los comentarios mira esta otra entrada.

    Saludos.

    ResponderEliminar
  30. potro estoy modificando mi blog pero que pongo dice
    descripcion del enlace y texto 1

    ResponderEliminar
  31. En texto 1 va el nombre del enlace, por ejemplo 'Juegos' y en la descripción del enlace lo que describe a ese enlace, por ejemplo 'Juegos para todas las edades'

    ResponderEliminar
  32. Hola Potro,,,
    Me gusta este estilo, Ya tengo una barra de menu pero me gustaria que funcione igual, me podrias ayudar?

    Te agradesco la ayuda

    http://elblogde-joe.blogspot.com

    ResponderEliminar
  33. Nunca lo he probado con otros menús ya existentes así que no sabría decirte si podría funcionar o no.

    ResponderEliminar
  34. ¡Hola Potro!. Me ha encantado este menú, ya lo he incorporado a uno de mis blogs. Sólo quería hacer una consulta. ¿Se podrá agregar un efecto hover en los enlaces del menú de modo que cada vez que el puntero se coloque encima de él tenga o cambie el color de fondo?. Gracias, saludos!

    ResponderEliminar
  35. Hola Sweet Muse,

    Claro que se puede, de ser así entonces el código por cada enlace sería así:

    <a href="URL del enlace"><span
    onmouseout="style.color='#FF0000',link_msg_show.innerHTML=''" onmouseover="style.color='#FF00FF',link_msg_show.innerHTML='Descripción del enlace'">Texto 1</span></a> |

    El primer código de color es el color del enlace en estado normal, y el otro código de color es el color del enlace al pasar el cursor.

    Saludos.

    ResponderEliminar
  36. Muchas gracias Potro, lo he logrado!. Besos :D!

    ResponderEliminar
  37. Hola Potro, este menú me gusta mucho, pero lo veo con mucha separación respecto al gadget de arriba, ¿que podría hacer para juntarlos más?;

    He probado a unir los dos códigos en un mismo gadget, pero no queda bien.

    ¿Tienes alguna idea?

    http://elvigilantedeseguridad.es/

    ResponderEliminar
    Respuestas
    1. Potro otra consulta...
      Con fire fox no funciona la descripción de los vínculos, ¿se puede arreglar?.

      Un saludo genio ;)

      Eliminar
    2. Supongo que Firefox ya no reconoce esas funciones, porque antes funcionaba en todos los navegadores :S

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger