Menu horizontal con borde superior

25 de agosto de 2009 123 comentarios ,
Este es un menú horizontal con un toque juvenil el cual tiene un borde superior y las pestañas cambian de color al pasar el mouse.
Puedes verlo funcionando en este blog de pruebas.
menu horizontal

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.


Para poner este menú en tu blog, entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Menú horizontal
----------------------------------------------- */
#menulineup {
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Color de la línea superior*/
background: transparent;
}

#menulineup ul{
margin:0;
margin-left: 40px; /*Margen izquierdo entre la primera pestaña y el borde*/
padding: 0;
list-style: none;
}

#menulineup li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#menulineup a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margen entre cada pestaña*/
padding: 5px 10px 5px 10px;
background-color: lightblue; /*Color de las pestañas*/
border-bottom: 8px solid white;
}

#menulineup a:hover{
background-color: #D10000; /*Color de las pestañas al pasar el cursor*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000; /*Color del borde inferior al pasar el cursor*/
color: white;
}

Ahora entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega esto:
<div id="menulineup">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
<li><a href="URL del enlace">Título 5</a></li>
</ul></div>

Ya sólo arrastra el elemento HTML/Javascript hasta abajo de la cabecera y cambia las URL de los enlaces y los títulos de las pestañas.
Puedes modificar los colores del menú a tu gusto; en el primer código he puesto las indicaciones para que sepas dónde hacer los cambios.


123 comentarios en:

" Menu horizontal con borde superior "

  1. Deja de tentarme con tantas alternativas bro!!!! Cada post nuevo que haces me da ganas de seguir modificando mi plantilla. Creo que este blog provoca Blogger-Adicción. jajajjaja.

    Un abrazo!!!

    ResponderEliminar
  2. Jajaja, recuerda que para acabar con la tentación hay que ceder a ella.

    Un abrazo!

    ResponderEliminar
  3. Muy buen truco.
    Ya lo estoy usando, me parece muy bueno.

    Saludos

    ResponderEliminar
  4. Me alegro que te haya servido.

    Saludos.

    ResponderEliminar
  5. Saludos Potro.
    Hermano hice todo lo que dices allí pero el menú, donde lo ponga, me sale vertical y sólo como un lista cualquiera. Uso una plantilla de blogger nueva.

    ResponderEliminar
  6. Hola Romer Riera,

    Por alguna razón esa plantilla no acepta los estilos. Lo que puedes hacer es que en el elemento HTML/Javascript donde pones el segundo código, ahí mismo arriba de él pon el primer código, sólo que ese código enciérralo con las etiquetas <style> y </style>
    Quedaría así:

    <style> #menulineup {
    padding: 0;
    width: 100%;
    border-top: 5px solid #D10000; /*Color de la línea superior*/
    background: transparent;
    }

    #menulineup ul{
    margin:0;
    margin-left: 40px; /*Margen izquierdo entre la primera pestaña y el borde*/
    padding: 0;
    list-style: none;
    }

    #menulineup li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform:uppercase;
    }

    #menulineup a{
    float: left;
    display: block;
    font: bold 12px Arial;
    color: black;
    text-decoration: none;
    margin: 0 1px 0 0; /*Margen entre cada pestaña*/
    padding: 5px 10px 5px 10px;
    background-color: lightblue; /*Color de las pestañas*/
    border-bottom: 8px solid white;
    }

    #menulineup a:hover{
    background-color: #D10000; /*Color de las pestañas al pasar el cursor*/
    padding-top: 10px;
    padding-bottom: 0;
    border-bottom-color: #D10000; /*Color del borde inferior al pasar el cursor*/
    color: white;
    } </style>

    <div id="menulineup">
    <ul>
    <li><a href="URL del enlace">Título 1</a></li>
    <li><a href="URL del enlace">Título 2</a></li>
    <li><a href="URL del enlace">Título 3</a></li>
    <li><a href="URL del enlace">Título 4</a></li>
    <li><a href="URL del enlace">Título 5</a></li>
    </ul></div>

    De ese modo ya se muestran los estilos del menú.

    Saludos.

    ResponderEliminar
  7. Funcionó perfecto y se pueden modificar sus backgrounds, altura, etc.
    Gracias Podro estoy en deuda

    ResponderEliminar
  8. Hola Romer Riera,

    Ahí en el primer código está en color verde las anotaciones para que hagas los cambios y lo personalices a tu gusto.

    Saludos!

    ResponderEliminar
  9. necesito ayuda urgente!....
    hice todo tan cual le di la combiancionnde colores q vaya con mi blgo, todo ok! le cmabie las urls tb!pero el promeblem lo tneog con las urls... osea... yo las cmaie y puse las direcciones correctamente pero.... al momento que paso el cursor x las direcciones, es la direccion de mi blog + el enclace q yo puse, como es logico le di clik y no funciona, pues me sale error...ayudameeeeeee

    ResponderEliminar
  10. Hola Marita Morgan,

    No veo el menú en tu blog, pero de cualquier forma sólo revisa que la URL esté sola, es decir, que no tenga un símbolo como este #

    Saludos.

    ResponderEliminar
  11. hola como estas?
    tengo una duda esk e visto en otros blog k ponen en menu encima de la foto de el encabezado tu puedes hacer eso?
    pork me gustaria tenerlo en mi blog
    saludos :)

    ResponderEliminar
  12. Hola xmileycyrus,

    Cualquier menú horizontal incluso este puedes ponerlo arriba de la cabecera. Sigue los pasos para este menú, pero en el último código que debes pegar en el elemento HTML/Javascript pégalo antes de la etiqueta:

    <div id='header-wrapper'>

    Esa etiqueta la encuentras en Diseño > Edición de HTML.
    De ese modo el menú estará arriba de la cabecera.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Estoy tratando de hacer esto (ponerlo sobre la cabecera) pero el segundo código (el de los links)es un gadget, no lo veo en la plantilla para ponerlo sobre el wrapper. (Gracias por esta enciclopedia de consulta que tenemos siempre a la mano)

      Eliminar
    2. Otra pregunta, Cada viñeta la pone como página de la URL principal, eje. www.reflexioteca.com/p... ¿Cómo hago para que la primer viñeta que titulo INICIO me lleve al link del dominio principal, o sea a www.reflexioteca.com.

      Eliminar
    3. Sólo pega el código en el área que quieras directo en la plantilla, donde desees que aparezca.
      Los enlaces tú eliges qué poner, si quieres que sea el inicio entonces pon la URL de tu blog ahí.

      Saludos.

      Eliminar
    4. Gracias por tu atención; pero sinceramente no sé donde ponerlo ya probé sobre /*Header y nada; y cuando pongo el link en la viñeta de INICIO me queda www.reflexioteca.com/www.reflexioteca.com, no sé porqué, ya que no está duplicado. Disculpa tanta molestia.

      Eliminar
    5. Recuerda que todos los enlaces deben iniciar siempre con http://
      Si no lo pones tendrás esos problemas.

      Eliminar
    6. Ok, ya solventé los dos problemas pero me surgió otro, al poner el menú sobre la cabecera ésta se corre hacia la derecha. ¿Tendrá solución?

      Eliminar
    7. Ya no veo este menú en tu blog :/

      Eliminar
    8. Cierto,lo cambié por otro que amablemente nos has proporcionado pero el problema es el mismo; he leído un par de cientos de comentarios y no encuentro solución. El asunto es que se corre a la derecha la imagen de la cabecera. Además, la plantilla no me acepta gadget sobre la cabecera. Eres muy cordial por atendernos.

      Eliminar
    9. Estimado Potro, ya encontré la respuesta en uno de los comentarios; muchas gracias. Siempre ando por aquí y estoy suscrito con otro correo a tu blog; por lo que te dedico un acróstico por tu altruísta labor; POTRO es el que:
      P resta
      O ído a
      T odo el que
      R equiere
      O rientación

      Eliminar
  13. Hola Juan Albaran,

    En el código tiene en color verde las anotaciones que dice dónde cambiarlo, busca en la parte de abajo del código.

    Saludos.

    ResponderEliminar
  14. Hola,primero que nada quisiera darte las gracias por todos tus trucos y tutoriales para mejorar nuestros blogs. Son muy útiles para quienes estamos comenzando en esto. Eres muy generoso con tus conocimientos.
    ¿Sabes?, segui los pasos para poner el menú horizontaly me resulto poniendo ambos códigos en el gadget, pero tengo dos consultas, Primero quiesiera que el menu esta sobre el la imagen del titulo de mi blog, entonces hice lo que sugeriste a alguien arriba, lo puse en la plantilla, sobre el código de header wrapper
    entonces quedo arriba, pero corrio hacia la izquierda mi imagen de titulo, ¿cuál es mi error?...La otra consulta, ¿sólo se pueden agregar 5 menús, como hago para que en el mismo gadget agregar más?...
    Gracias por todo...
    visita mi blog : www.mi-tallerdepapel.blogspot.com

    María Angélica

    ResponderEliminar
  15. Hola de nuevo...quisiera también hacerte otra consulta...y si puedes ayudarme sería genial, sino no te preocupes.
    El asunto es con el formulario de comentarios...he intentado de muchas maneras ponerlo en mi blog, pero me ha sido imposible...obviamente algo que he hecho o la plantilla que he modificado no permite que se visualice correctamente...sólo aparecía (porque ya no), cuando yo creaba una entrada y apretaba el botón ver entrada, entonces aparecía,y no una , sino tres veces...¿que estaré haciendo mal...
    ¿Me puedes ayudar quisiera que mi formulario se viera como el tuyo, numerado y agregando una pequeña imagen representativa para mi blog...Mil gracias y perdona la patudes, pero necesito ayuda.
    Graciass y Saludos.
    María Angélica

    ResponderEliminar
  16. Hola María Angélica,

    Puedes agregar más menús sin problema, o si quieres agregar más enlaces, o sea, más pestañas al menú, sólo agrega antes de </ul> una línea como esta:
    <li><a href="URL del enlace">Título</a></li>

    Para que no se recorra tu cabecera agrega debajo del código del menú esto:
    <div style='clear: both;'/>

    El formulario que yo uso es el de EmailmeForm, puedes crear el tuyo y ya sólo agregas en un gadget el enlace del formulario como lo he hecho yo.

    Cualquier otra duda me comentas.
    Saludos.

    ResponderEliminar
  17. Hola Potro...Mil gracias por atender mis consultas tan rápido...te cuento que me resultó perfecto lo de añadir más pestañas y de agregar el código debajo del menú, para que no se corriera mi imagen de titulo...eso sí ahora encontré tu tutorial de menu desplegable y lo estoy probando en un blog de pruebas que tengo...mi consulta sobre este último es...ingresé el código en la plantilla y en el gadget agregué más pestañas y todo ok, lo que no sé, es si además de personalizar los colores, también se puede con el ancho de la barra.Mi imagen de titulo es de 800px,quiero que la barra de menú también sea más ancha.Lo otro, es que nunca he subido un código a un hosting, existe uno mejor que otro,como lo busco?
    Cuando descargué el sgrip que aparece al final del tutorial, aparece un menuslide en Notepad,¿es ahí donde tengo que hacer todas las modificaciones y luego este código subirlo al hosting?
    Ah!!, con respecto a lo de la forma de contacto, la que me recomiendas la tengo puesta, pero con ella, sólo me llega el comentario a mi mail, lo que quiero es tener una forma de comentarios donde lo que me escriban aparezca debajo de las entradas,así como ahora aparecerá esto en el tuyo...seguro que algo estoy haciendo mal, pero no logró descubrir que es...
    Gracias por tu tiempo y paciencia con todas mis consultas...espero tus comentarios cuando te sea posible...
    Muchos Saludos...
    María Angélica.

    ResponderEliminar
  18. Hola María Angélica,

    Debe de poderse hacer más ancho el menú ¿exactamente cuál menú desplegable dices para poder ver el código?
    Respecto al hosting casi cualquiera puede servirte sólo que no todos aceptan todo tipo de archivos. Dime qué menú es y te digo lo del código en el Notepad.

    Respecto al formulario de comentarios creo que ya he entendido, al parecer falta un código en tu plantilla y por eso no aparece.
    Primero entra en Configuración > Comentarios y selecciona Entrada incrustada a continuación. Luego ve a Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca este código:

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    Y remplazalo por este otro:

    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>

    Con eso ya deberá aparecer el formulario de los comentarios debajo de tus entradas.
    Espero me digas cuál menú quieres probar para poder responderte a tus otras preguntas.

    Saludos!

    ResponderEliminar
  19. Hola...Te agradezco nuevamente por toda tu ayuda, por lo de el menú voy a buscar en tus entradas y te digo cual es, para ver si me ayudas.Respecto de lo de la orma para comentarios, lo intente, pero no me resulta...pero bueno seguiré tratando, yo creo que existe algo en mi plantilla, que borre o que no esta o esta demás que bloquea esto...porque en mi blog de pruebas lo tengo y no tuve problema en ponerlo, claro que esa plantilla no tiene todas las modificaciones que la otra...
    De todos modos gracias...
    Muchos Saludos!!!!
    María Angélica

    ResponderEliminar
  20. Posiblemente eliminaste algo, generalmente remplazando el código anterior se arregla el problema. Igual si te animas mándame un respaldo de tu plantilla para que yo igual haga mis pruebas y con suerte identifico el problema:
    ciudadblogger@msn.com

    Saludos!

    ResponderEliminar
  21. Pues...no voy mal pa`ser novata!!! Una pregunta, donde tienes los codigos de los colores...o, de donde los cojo??? Gracias!!!

    ResponderEliminar
  22. Hola ✿Nyn✿,

    En este enlace puedes ver los códigos de los colores:
    http://html-color-codes.info/codigos-de-colores-hexadecimales/

    Saludos.

    ResponderEliminar
  23. Hola, me gustaría saber como hacer un submenu en una de las pestañas. Que tuviera la misma liena de colores para que no varie mucho el codigo. ¿Es posible?
    Graicas.
    Estoy haciendo un blog y casi seguro tenga que hacerlo.
    Alber

    ResponderEliminar
  24. hola amigo te hago una consulta.nose que pasa pero no me funciona el menu coloco las etiqeutas pero no me las lee.- cuando hago click en cada titulo no me aparecen las entradas te dejo mi direccion www.somoslocal.com.ar

    ResponderEliminar
  25. Hola Somos Locales,

    La URL de la etiqueta debe tener la última parte tal cual como es la etiqueta original.
    Por ejemplo, la etiqueta Hockey empieza con una mayúscula, entonces la URL de la etiqueta debe ser:
    http://www.somoslocal.com.ar/search/label/Hockey

    Y no con minúscula como tú lo has puesto. Lo mismo para las etiquetas que tienen acento como Fútbol.

    Saludos.

    ResponderEliminar
  26. Hola otra vez!! Ah cómo molesto ¿verdad? =( pero es ke estoy negada para esto de blogger, kiero poner ese menú en mi blog pero en vez de kedarme en la barra donde originalmente está diseñado para ir en la plantilla, me lo pone justo abajo, si intento modificarlo me aparece en forma de lista y total ke no sale como debería =S Kiero ke kede centrado, porke me keda de lado izkierdo, pido mucho lo séeeeeeeeeeee pero eres el único ke puede auxiliar a esta pobre alma ignorante =)
    Mil besos y gracias como siempre!!

    ResponderEliminar
  27. Hola de nuevo Merlina,

    Sabes que no es ninguna molestia, por el contrario, es grato leerte por estos rumbos =)

    Estos menús no quedan centrados, pues se acomodan las pestañas desde la izquierda y se van agregando a la derecha hasta que se llena.
    Lo que puedes hacer es llenar todo el menú de pestañas para que de esa forma se vea centrado.

    El lugar donde dices que debería ir ya tiene otro menú es por eso que lo pone debajo de él.
    Puedes quitar ese que tienes y agregar este en su lugar, para hacerlo busca en tu plantilla y elimínalo:

    <div id='navlist-container'>
    <div id='navlist'>
    <ul>
    <li class='page_item current_page_item'><a href=''>Inicio</a>
    </li>
    </ul>
    </div>
    </div>

    En su lugar pon el segundo código de esta entrada.

    ¡Besos!

    ResponderEliminar
  28. Eres mi Personal Jesus, jajaja, neta ke sí =)

    Fíjate ke modifiké todo como me sugeriste, pero aun así, salía el menú abajo de la barra donde kería ke estuviera, pero se me ocurrió cambiar al código de esta entrada, el nombre de "menulineup" por el de mi plantilla y kedó súper bien, sin problemas, ahora el link SÍ funciona y con el otro no encontraba la página =S. Ahora lo malo es ke me aparece un punto negro ke no kiero ke esté ahí, ¿Hay manera de eliminarlo o por lo menos de cambiarle el color? Sé ke es de we... flojera mi pregunta pero sólo tú puedes iluminarme =)

    Tres millones de besos y gracias gracias gracias por tu súper ayuda!!!!!

    ResponderEliminar
  29. El mérito es todo tuyo, siempre es mejor cuando uno mismo busca las soluciones experimentando un poco =)

    Para eliminar el punto intenta con esto, busca en tu plantilla esta línea:

    #navlist-container{

    Arriba de ella agrega esto:

    #navlist-container ul li{list-style:none;}

    ¡Besos!

    ResponderEliminar
  30. No, no, el mérito es TODO tuyo, créeme, no sé ke haría sin tu valiosa ayuda =)

    Mil gracias de nuevo!!!

    Besitos!!!!!

    ResponderEliminar
  31. Hola Potro en este menu, se pueden poner submenus,
    gracias

    ResponderEliminar
  32. ok,,como hago para tener esta ventana de comentarios

    ResponderEliminar
  33. Aquí puedes encontrar información al respecto.

    ResponderEliminar
  34. Hola Potro,

    Giancarlo nuevamente ¿Como va la cosa?... te escribo por que tengo la siguiente duda a ver si me puedes ayudar con esto, baje una plantilla para un blog que tenia olvidado y cuando vi la plantilla en btemplates aparece que tiene menu, es decir, vine con un menu arriba que dice home, edit etc. Resulta que coloque la plantilla en mi blog y cuando le doy vista previa este menu no esta activado. ¿Como hago para activarlo?

    Si se puede aqui te dejo la platilla original y la de mi blog para que veas:

    Plantilla Original: http://btemplates.com/2009/06/27/beauty-blog/demo/

    Mi blog: http://cuidadoynutricionparalapiel.blogspot.com/

    Gracias brother un abrazo!!!

    ResponderEliminar
  35. Hola de nuevo Giancarlo,

    No es que haya que activarlo, más bien creo que cuando bajaste la plantilla no existía ese menú, y recientemente el diseñador agregó el menú.
    Podrías descargar de nuevo la plantilla e instalarla, ya deberá tener el menú que mencionas.

    ¡Saludos!

    ResponderEliminar
  36. Hola Potro,

    Efectivamente en el momento que la descargue ya se veia ese menu... :( y si la vuelvo a descargar voy a perder todo lo que hecho hasta ahora???... No sera que hay que activar algo desde el html???

    ResponderEliminar
  37. Hola Potro,

    Mientras me contestas, estoy bien la plantilla en diseño - elementos de pagina y un poco mas arriba de lo que dice entradas del blog salen dos barras que dicen añadir gadget independientes claro (y no es la de las entradas) justo detras de esas dos hay otra barra que dice elementos de pagina pero no se puede tocar. No sera eso el menu y no esta activo....

    Hepllllllllllllllllllllllllllllll jajajajaja yo se que si lo vamos a poder arreglarrrrr....

    Vergaaaa chamo hoy te he escrito demasiado jajaja disculpa el fastidio...

    Gracias Potro

    ResponderEliminar
  38. En las plantillas de Blogger no hay nada que se active, no es como Wordpress que activas un plugin y ya tienes una característica especial, en Blogger todo hay que hacer manualmente.

    Si no quieres cambiar de plantilla entonces haz esto, entra en Edición de HTML y busca esta línea:
    <div id='navigation'>
    <div class='navigation section' id='navigation'>

    Debajo pega esto:

    <ul>
    <li><a href='http://www./'>Home</a></li>
    <li><a href='http://www./'>Posts RSS</a></li>
    <li><a href='http://www./'>Comments RSS</a></li>
    <li><a href='http://www./'>Edit</a></li>
    </ul>

    ¡Saludos!

    ResponderEliminar
  39. Hola Potro,

    Me paso algo extraño con esto, te envie un correo con las capturas de imagenes y el problema.

    Disculpa mi terqueda.

    Gracias...

    ResponderEliminar
  40. ¡Está muy bien este menú! lo acabo de poner y me ha quedado muy bien, además, es el menú más sencillo que he visto, y totalmente personalizable... Potro, ¡eres mi ídolo! =D

    ResponderEliminar
  41. Igual a mí me gusta lo sencillo pero atractivo que es el menú :)
    ¡Saludos!

    ResponderEliminar
  42. Excelente y probando desde colombia! http://creacionhumana.blogspot.com/

    saludos!!!!

    ResponderEliminar
  43. Lo pude usar en mi blog Club No Entiendo !! muchas gracias , esta buenisimo el blog :) saludos !

    ResponderEliminar
  44. Hola Potro:
    Al final he optado por estas pestañas, que me quedan mejor. Pero, ¿cómo no? tengo un problema, el gadget de las pestañas mequeda muy separado del de las páginas, y no hay forma de juntarlos.Intento desplazarlo, parece que se vaya a cambiar, pero vuelve al mismo sitio.
    ¿Te importaría ayudarme de nuevo?
    Muchísimas gracias por que me estás ayudando mucho a armar mi blog
    wwww.bonavistacuinaclub.com

    ResponderEliminar
  45. Prueba poniendo antes de ]]></b:skin> esto:

    #HTML2 {margin-top:-30px;}

    Eso le dará un margen de -30px para que se suba, ahí puedes controlar la altura si lo deseas.

    ResponderEliminar
  46. Muchiisiismas gracias, de verdad.

    ResponderEliminar
  47. Hola!
    Una pequeña consulta, en este menú se podría hacer que cada pestaña fuese de un color¿?¿?

    ResponderEliminar
  48. hola potro,me a gustado mucho este menu y creo que su instalacion tan secilla,se deve a que tu lo esplicas muy bien,solo quisiera saver, si se le pueden agregar mas pestañas.
    gracias baron.

    ResponderEliminar
  49. Claro, antes de </ul></div> agrega otra línea como esta por cada pestaña que quieras agregar:
    <li><a href="URL del enlace">Título 6</a></li>

    ResponderEliminar
  50. Hola Potro! He seguido las instrucciones que pones en este post para hacer una barra de menu en mi blog y todo perfecto!
    El problema es que al probarlo con el explorer sucede una cosa rarísima y es que cambia el diseño completamente e incluso en algunas versiones de explorer desaparecen las pestañas y cambia el fondo de la barra de menú...
    ¿Se te ocurre alguna forma de evitar esto?
    Mi blog es: http://portelabikers.blogspot.com/

    Gracias de antemano

    ResponderEliminar
  51. Hola Potro.
    He utilizado tu menú en mí blog.

    http://eldomingococinoyo.blogspot.com/

    Me gustaría saber si se puede modificar para que cuando selecciono una pestaña y voy a su dirección, esta pestaña se quede con el color que yo elija, para poder saber en cada momento en que categoría estoy.

    Gracias

    ResponderEliminar
  52. Pas, mas que un problema de Internet Explorer (aunque si los da, y muchos) es que en las plantillas hechas a traves del Diseñador de plantillas de Blogger los menus no se pueden personalizar casi nada ya que tienen incorporado uno.

    Raimon Moreno, con los menus hechos con CSS no es posible, usualmente eso se consigue con otros mas elaborados con PHP y flash de lo cual desconozco.

    ResponderEliminar
  53. Ciertamente te ha quedado muy lindo :)

    ResponderEliminar
  54. Hola de nuevo amigo: Estoy haciendo una pag web y me encanta este menú. Lo he puesto y funciona bien pero quisiera submenus. he leido que no es pòsible los submenus:es así verdad?
    Si lo es podrias dirigirme a otro tipo de menu que incluya submenus y que sea de tu confianza?
    Muy agradecido como siempre

    ResponderEliminar
  55. Hola Priamo, efectivamente en este menú no se puede. Aquí hay otro pero requiere de scripts.
    Igual puedes ver en la sidebar la sección Blogs de ayuda, seguro ahí también encontrarás interesantes propuestas.

    Saludos.

    ResponderEliminar
  56. Buenas Potro, como no encuentro la entrada en la que comenté otro día, te lo pregunto en esta, que puedo hacer para que en la página http://todoculturayociodeburgos.blogspot.com/ donde pone inicio, about, services.. poder mandar a algún enlace desde esas palabras???

    GRacias.

    ResponderEliminar
  57. En esta entrada está la respuesta:
    http://ciudadblogger.com/2010/09/menu-desplegable-con-efecto-deslizante.html

    Saludos.

    ResponderEliminar
  58. Potro, qué tal, quisiera poner en mi blog, http://futbol-escrito.blogspot.com/ una barra de menú con los logos de equipos de fútbol, para que se vea como en esta página http://www.as.com/ ...MIL GRACIAS

    ResponderEliminar
  59. Sólo agrega en un HTML/Javascript un enlace simple de imagen, es decir, que por cada logo que quieres usa este código:

    <a href="URL del enlace"><img src="URL de la imagen" /></a>

    Para que te queden horizontal pon los códigos uno seguido del otro sin dar saltos de línea.

    ResponderEliminar
  60. Ahora, cómo hago para hace enlaces dentro del mismo blog¿? Es decir, como páginas, pero con imágenes¿?

    ResponderEliminar
  61. Sólo escribe una entrada y ahí agrega las imágenes que deseas. Publica la entrada y entra a ese post.
    Arriba en la barra de direcciones de tu navegador verás la dirección web de la entrada (URL), copiala y esa es la que pondrás donde dice URL del enlace.
    Eso mismo lo puedes hacer para cualquier entrada.

    ResponderEliminar
  62. oye tengo un problema cuando pongo el menu pasate por mi blog
    http://bandaenvivo.blogspot.com/ y dime por k como k se repite el fondo de color rojo o por k me pasa asi

    ResponderEliminar
  63. Recuerda que primero debes seguir los pasos de la otra entrada que se menciona ahí.

    ResponderEliminar
  64. k onda ya solucione el problema le cambie codigo en otra parte no como dices en la otra entrada por k casi me salia lo mismo sale pues

    ResponderEliminar
  65. olle portro y el borde no se puede poner en la de abajo en vez de arriba?

    ResponderEliminar
  66. Pues no queda muy bien, pero puedes cambiar esta parte:

    #menulineup {
    padding: 0;
    width: 100%;
    border-top: 5px solid #D10000; /*Color de la línea superior*/
    background: transparent;
    }


    Por esta:

    #menulineup {
    padding-bottom:24px;
    width: 100%;
    border-bottom: 5px solid #D10000; /*Color de la línea superior*/
    background: transparent;
    }

    ResponderEliminar
  67. Muchas gracias ... Alex
    http://patinar-por-barcelona.blogspot.com/

    ResponderEliminar
  68. En cada enlace por ejemplo quiero poner caracteristicas de la organizacion..como agrego el texto a cada uno de los menus, del menu horizontal??

    saludos

    ResponderEliminar
  69. Hola,

    En una página independiente agrega el contenido que quieres, luego la URL de esa página la pones el menú para que la enlace.
    Para crear la página entra en Creación de entradas > Editar páginas. Ahí verás la opción para crear una. Ya que la publiques entra a ella y copia la URL que aparece en la barra de direcciones de tu navegador, esa es la que pondrás en el menú.

    Saludos.

    ResponderEliminar
  70. una preguntilla, ¿cómo hago para quitar espacio entre el menú y la la entrada superior. Mira mi blog: http://gonzalo-enjoythemusic.blogspot.com/ y verás lo que te digo (existe mucha separación entre el menu y las entradas). ¿Se puede quitar un poco de espacio?
    Mil gracias!

    ResponderEliminar
  71. Hola Gonzalo,

    Busca esta parte de tu plantilla:
    .main-inner .columns {

    Justo debajo de ella agrega:
    margin-top:-40px;

    ResponderEliminar
  72. Muchísimas gracias de verdad. Increíble. En menos de 24 horas obtengo respuesta y funciona 100%. De verdad que te estoy muy agradecido. Gran blog!

    Muchas gracias!

    ResponderEliminar
  73. Hola como puedo hacer para hacerlo mas pequeño de altura, o también me valdría que fuera transparente el colo principal me puedes ayudar gracias

    ResponderEliminar
  74. Para hacerlo transparente cambia lightblue, por transparent
    La altura es automática, y se toma según el tamaño de la fuente, si le pones una fuente más pequeña entonces la altura y las pestañas serán más chicas:
    font: bold 12px Arial;

    ResponderEliminar
  75. Estimado Potro, es posible colocar un buscador personalizado de Google dentro del menú, al estilo de Apple en su web http://www.apple.com/?

    Muchas gracias!

    ResponderEliminar
  76. Pues yo he tratado de poner los buscadores personalizados dentro de los menús y no he podido :/
    Supongo que si el menú está hecho con tablas HTML se ha de poder porque al menos con listas ordenadas (UL) no he podido.

    ResponderEliminar
  77. Hola Potro! Antes que nada, muchas gracias por este tutorial, me sirvió mucho.
    Ahora, quisiera saber como hago para que cuando entre a esa pestaña, me lleve a temas que solo esté relacionado con ella, por ejemplo, tengo una que es de música y que cuando le dé, solo salgan entradas que sean de música...no sé si me entiendes :S

    http://locussomniare.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Pandora, para esos casos necesitas enlazar las páginas de tus etiquetas:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  78. Ya lo intente, inclusive segui lo de la entrada "como usar cualquier meno en..." y por más que reviso y reviso el menu aparece solo los enlaces juntos sin el menu.

    Que pasa espero puedas ayudarme potro
    de antemano Gracias.

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog has puesto el menú AlexG?

      Eliminar
    2. creo que me pasa lo del comentario "5" voy a probar la solución

      Eliminar
    3. listo ya esta, con la solución del comentario 5 me funciono.
      Gracias!!

      Eliminar
    4. Vale, aun así, si lo quieres poner como debe ser, arregla el error que tienes en el CSS, verás que arriba de estos estilos eliminaste una llave de cierre:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  79. Hola de nuevo amigo: Quisiera que al hacer click en un boton del menu , éste se quedase resaltado hasta que pinchase en otro.
    Gracias por tu ayuda como siempre.

    ResponderEliminar
    Respuestas
    1. Hola Priamo, ninguno de estos menús tienen esa característica, es algo un poco más complejo. Quizá te convenga usar el gadget de Páginas, ese si lo tiene (si mal no recuerdo), ya sería cosa de que lo personalices.
      Saludos.

      Eliminar
  80. Hola, tengo una duda... no tienes un menu que siempre se quede hata ariba de la pagina y pase encima de todo conforme uno deslize la pag.? mas o menos como la barra de hay en facebook que esta siempre visible
    gracias

    ResponderEliminar
    Respuestas
    1. Casi a cualquier menú se lo puedes aplicar, sólo es cuestión de que tu menú (el que uses) le pongas estos valores:
      position:fixed;
      top:0;
      left:100px;

      Eliminar
  81. Potro, una duda...
    El fondo de mi blog (culodesofa.blogspot.com) es gris (#7f7f7f) y al cambiar "border-bottom: 8px solid white;" por "border-bottom: 8px #7f7f7f" queda bien, pero al pasar el cursor desaparece "border-bottom-color: #00ffd5".
    ¿Funciona sólo con fondo blanco o estoy haciendo algo mal?
    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Jaime, ahí te hace falta especificar el tipo de borde, lo tienes así:
      border-bottom: 8px #7f7f7f;

      Y debe ser así:
      border-bottom: 8px solid #7f7f7f;

      Eliminar
  82. Potro, otra duda... ¿Cómo correr hacia la derecha la linea superior?
    #menulineup {
    padding: 0;
    right (le puse esto y centro la linea, pero la quité porque no funciona el width: 98.8%)
    width: 98.8%;
    Mi pretención es que quede centrada en el mismo margen de la imagen del slider. Saludos.

    ResponderEliminar
    Respuestas
    1. Puedes aplicar un margen izquierdo debajo de #menulineup { por ejemplo:
      margin-left:30px;

      Eliminar
  83. Gracias Potro. Te pasaste, funciona de maravillas.

    ResponderEliminar
  84. Hola Potro:
    Me gustaria que el menú quedase centrado en vez de a la izquierda, debajo de la cabecera. ¿Como lo hago?
    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Elena, aumenta el valor del /*Margen izquierdo entre la primera pestaña y el borde*/ hasta que quede centrado.
      Saludos.

      Eliminar
  85. Hola potro, otra vez yo, ya había instalado éste menú en mi blog, hasta ahora me doy cuenta de un detalle, cuando minimizo el navegador a versión móvil o miro la web desde mi celular solo me deja clikar en los 2 primeros titulos del menú, el resto no me permite, quiero un menú que me funcione para la versión adaptable a dispositivos, me puedes ayudar a solucionarlo? o aconsejarme otro menú horizontal que funcione para mí y ya me las apaño yo. :D gracias. un saludo.

    ResponderEliminar
    Respuestas
    1. dejo aquí la dirección de mi web: http://soundnotes-power.blogspot.com/

      Eliminar
  86. Con cualquier menú te sucederá Jhon. Ahí hay dos opciones, una es que para la versión móvil uses un menú desplegable (es mucho más trabajo pero es lo más tradicional), o bien, que usando medias queries apliques un margen superior al ID "fontSize", para que todo ese contenedor se baje y así puedan estar accesibles esos enlaces.

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

    ResponderEliminar
  88. tienes algun template responsive gratuito para un blog de negocios? gracias
    http://dinerodigits.blogspot.com/

    ResponderEliminar
    Respuestas
    1. listo ya consegui uno decente si algun consejo que me puedas dar te lo agradezco
      http://www.dinerodigits.com

      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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger