Menú desplegable con pestañas de varios niveles para tu blog de blogger


Si quieres un menú para tu blog de blogger que tenga varias pestañas y que cuando pasas el ratón por encima salgan más submenús debemos hacer lo siguiente:



1) Vamos a Diseño
2) Edición de HTML
3) Buscamos el código: ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:


/* Menu desplegable
------------------------------------------------------*/

#menubloque {
background:#8c8c8c;
width: 500px;
height: 35px;
font-size: 13px;
color: #ffffff;
border: 1px solid #424242;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:'Trebuchet MS',Arial,Verdana,Sans-Serif;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #FFFFFF;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: lowercase;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #000000;
background: #cccccc;
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: lowercase;
background: #bbbbbb;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background: #e3e3e3;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}
/* Fin menu desplegable ---------------------------*/




5) Ahora buscamos <div id='content-wrapper'>
6) Justo antes de <div id='content-wrapper'> pegamos el siguiente código:


<div id='menubloque'>
<ul id='menudesplegable'>
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
<li>
<a href=''>Categorías</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li>
<a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>

<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=''>Categorías 2</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 5</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>




El bloque señalado en verde es el bloque que contiene los enlaces "fijos" es decir, los que no despliegan opciones.

Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).

Sustituye:
TITULO: por el título de la página o el enlace.
URL DE LA PAGINA: por la dirección del blog o la página web.



De nuevo, gracias a elbalcóndejaime.

120 comentarios:

  1. Hola. He intentado poner este menu desplegable en mi blog, pero al guardar la plantilla html me da error. Me llama la atención que los fragmentos de html a insertar sean iguales. ¿Puede ser un error? ¿En el primer fragmento no se debia especificar posicion, margenes, etc...?

    ResponderEliminar
  2. Tienes toda la razon. Mil disculpas.

    Un saludo y gracias por el aviso.

    ResponderEliminar
  3. Ahora ya funciona. Pero necesito crear "Categorias3" en el primer nivel de menú.
    ¿Que tengo que hacer?
    Gracias.

    ResponderEliminar
  4. Añade otra Categoria con esta forma:

    <li>
    <a href=''>Categorías 3</a>
    <ul>
    <li>
    <a href=''>Categoría 1</a>
    <ul>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    </ul>
    </li>

    Todo esto antes del utlimo </ul>

    ResponderEliminar
  5. Gracias. Ya lo intentaba asi, pero lo ponía antes del ultimo (/div). Ahora ya funciona.
    Enhorabuena y gracias por tu trabajo. Cuando tenga todo listo añadiré un enlace a tu blog.

    ResponderEliminar
  6. Gracias a ti T360R. Me alegro que te funcione.

    Comentarios como el tuyo me hacen seguir adelante. Mil gracias.

    ResponderEliminar
  7. Me apresure al decirte que funcionaba, creía que iba a funcionar, pero no. Me sale este error:
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "li" must be terminated by the matching end-tag "".
    Pegue el ultimo fragmento de html como me dijiste, pero habia cambiado ya algunas cosa en el principal, como el ancho, los colores de texto y de fondo, las urls y los titulos de las opciones... ¿Tiene esto algo que ver? Si suprimo el ultimo fragmento me funciona perfectamente. Puedes verlo en http://t360r.blogspot.com. Además quiero poner la fuente del menu como la que tengo en los titulos de los gadgets de las sidebars y las fechas de publicacion de los post , pero no lo consigo, solo el color. ¿Me puedes ayudar?
    Gracias

    ResponderEliminar
  8. Ya solucione lo del ultimo fragmento añadiendole
    (/li)
    (/ul)
    (con <> en vez de parentesis) al final del que pusiste. Pero sigo sin conseguir cuadrar la fuente.

    ResponderEliminar
  9. Cierto, perdona no haberlo aclarado totalmente.

    Para cuadrar la fuente tiene que emplear: <center> </center> (al comienzo y al final respectivamente).

    Un saludo.

    ResponderEliminar
  10. Gracias, pero no me refería a eso. Con "cuadrar" me refiero a hacerla igual en tipo de fuente,tamaño,negrita,etc...
    Espero a tu vuelta, disfruta de las vacaciones.

    ResponderEliminar
  11. Hola, como hacer el mismo menú pero en vertical para ponerlo en la sidebar???

    ResponderEliminar
  12. Hola!
    Muchas gracias por tus explicaciones de los menus despegables. Tengo una duda, a ver si me la puedes responder. Tengo 3 bloques fijos y 2 bloques desplegables, necesitaria añadir otro bloque despegable y no lo consigo. Puedo añadir otro bloque fijo pero me desaparece uno despegable, en fin que no consigo que haya más de 5 bloques en la barra principal. Como puedo tener más bloques despegables? Necesito minimo otro más. Muchas graciasss

    ResponderEliminar
  13. Miguel en ves de poner el codigo antes de < div id='content-wrapper' > tenes que poner el codigo antes de < div id='sidebar-wrapper' > entra a mi blogger y veras como lo tengo yo http://vegavenusmarte.blogspot.com/

    ResponderEliminar
  14. @ T360R. Debes cambiar en donde pone font por la fuente que quieras.

    @ adm100388. Muchas gracias!

    @ Cris. Desconozco si estas poniendo los codigos en el mismo gadget HTML/Javascript. Si es asi, copia el menu desplegable extra en un nuevo gadget.

    @ Miguel Angel - Yessica Vega. Ya te ha respondido la compañera Yessica. Muchas gracias a los dos.

    Un saludo.

    ResponderEliminar
  15. Consigo ponerla del mismo tamaño, o eso creo, pero no consigo que me salga negrita. lo tengo así:

    /* Menu desplegable
    ------------------------------------------------------*/

    #menubloque {
    background:#000000;
    width: 660px;
    height: 35px;
    color: #0066CC;
    border: 1px dotted #333333;
    padding: 0px auto 0;
    font-weight: bold;
    margin: 15px auto 0;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    }

    Puedes verlo en http://t360r.blogspot.com

    ResponderEliminar
  16. Hola T360R. Yo lo veo perfectamente. De color azul todas las letras y como dices, mismo tamaño. Si quieres cambiar el color es en color: #0066CC; cambias el #0066CC

    ResponderEliminar
  17. Como se si los pongo en el mismo gadget o si estoy creando uno nuevo? El error que me da es de tag li

    ResponderEliminar
  18. Hola Cris, debe seguir esta misma estructura:

    <li>
    <a href=''>Categorías 3</a>
    <ul>
    <li>
    <a href=''>Categoría 1</a>
    <ul>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    </ul>
    </li>
    </li>
    </ul>

    Todo esto antes del utlimo </ul> del codigo del paso 6)

    ResponderEliminar
  19. buenas ya estoy otra vez por aqui jejejje si solo quiero que me baje un submenu que es lo que tengo que eliminar de los codigos que has puesto, a ver si me explico en tu ejemplo viene el menu fijo cada menu con su submenu pero ya no quiero que salga un submenu del submenu como tu ejemplo solo quiero que de cada fijo salga un submenu que debo eliminar

    ResponderEliminar
  20. Hola goyu73. Fijate en la estructura del codigo.

    En "categorias" (color naranja flojo) a continuacion aparecen los submenus llamados "categorias 1, 2...".

    Si solo quieres que aparezca un submenu deberia tener esta forma:

    <a href=''>Categorías</a>
    <ul>
    <li>
    <a href=''>Categoría 1</a>
    <ul>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    <li><a href='URL DE LA PAGINA'>TITULO</a></li>
    </ul>
    </li>
    </ul>

    Fijate que en el codigo cada vez que abrimos un <li> se cierra con un </li> Si te fijas en esto ultimo entenderas la estructura correctamente.

    Un saludo.

    ResponderEliminar
  21. Hola como puedo cambiar la posición del menu moverlo más hacia la izquierda?

    ResponderEliminar
  22. Hola. En el paso 4) al comienzo del codigo te encuentras con esto: padding: 0px auto 0;

    Ves probando valores y visita esta entrada para saber como modificar el padding: http://www.quierocrearunblog.com/2009/09/chuleta-css-para-tu-blog-de-blogger.html

    ResponderEliminar
  23. Hola. Ya he conseguido poner las letras del menu en negrita. Cambie en todos los sitios donde ponía:
    font-weight:normal
    por
    font-weight:bold

    Gracias por tu ayuda

    ResponderEliminar
  24. Me alegro que ya estes conforme al 100%. Te ha quedado de lujo compañero.

    Gracias a ti por tu visita y por comentar. Un saludo!

    ResponderEliminar
  25. hola a todos.
    Veo por aqui que sois unos cuantos los que lo habeis logrado, bueno yo estoy en ello.
    Solo que al acabar todos los pasos y querer guardarlo me da el siguiente error:
    o se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "".

    Alquien me podria decir que significa?q debo hacer?

    Soy una autentica novata en este ambito agradeceria ayuda.
    Gracias!

    ResponderEliminar
  26. Hola La niña de azul. Revisa los pasos 4) y 6) (hay que pegar esos codigos antes). El eror que te da es porque faltan "". Busca a ver si has copiado el codigo correctamente.

    Si tienes problemas no dudes en volver a decirlo y te ayudo lo mejor que pueda. Un saludo y gracias a ti por tu visita y comentario.

    ResponderEliminar
  27. He modificado el menu y me sale este mensaje de error:
    "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag"
    El fragmento de html creo que esta bien, empieza por div y acaba por /div ¿por que puede ser?
    Gracias.

    ResponderEliminar
  28. Pues te esta diciendo que falta el /div.

    Antes te iba bien. ¿Que es lo que has modificado para darte ahora error? ¿Que cambios nuevos has añadido para que te pase ahora esto?

    ResponderEliminar
  29. Pues no se, he añadido una nueva categoria con dos niveles, pero el /div está. Estoy haciendolo por partes y ya consegui que me funcionara algo.

    ResponderEliminar
  30. SOS UN GENIOOO PERO NECESITO UN FAVOR...COMO HAGO PARA PONER UNA LINEA DE DIVISION ENTRE CADA PARTE QUE SE YO POR EJEMPLO

    INCIO / CONTACTO / FORO ... Y ASI
    NO QUIERO QUE QUEDE
    INCIO CONTACTO FORO

    ResponderEliminar
  31. @ T360R. Sigue probando, seguro que es una tontería de nada.

    @ Hola Fede. Tienes que añadir en el primer código del paso 4) después de por ejemplo background lo siguiente:

    boder-right: 1px solid black;

    También puedes optar por añadir en el paso 6) en donde pone inicio, contacto... añadir una barra.

    ResponderEliminar
  32. Asi era. Ya lo arregle. Me basto con ir contando li y ul abiertas y cerradas, pero no se porque me daba el fallo con el div.
    Gracias por tu ayuda.
    Tengo una consulta un tanto peculiar, a ver si me puedes ayudar. No tiene que ver con el tema de este post pero no se donde ponerla.
    Quiero que un post me salgan unas tablas de una base de datos que tengo en mi ordenador. Son en xml (creo) y tengo una direccion dns con no-ip para poder acceder a ellas.
    No se si me explico bien, ¿tienes alguna idea?

    ResponderEliminar
  33. Pues vaya, yo pensé que sería cosas de los li y ul pero como te daba error de div me hizo pensar que era por las div. Para que veas, esto es impredecible jeje.

    Para crear tablas tienes que seguir esta estructura:

    <table border="1" cellpadding="4"><tbody>
    <tr><td>Ford</td>
    <td>Citroen</td>
    <td>Peugeout</td></tr>
    <tr><td>Ferrari</td>
    <td>Porsche</td>
    <td>Mclaren</td></tr>
    <tr><td>Lunes</td>
    <td>Martes</td>
    <td>Miércoles</td></tr>
    </tbody></table>

    Las tres primeras palabras son la primera fila. Las otras tres forman la segunda fila y las tres últimas la tercera fila.

    Si quieres añadir más filas agrega esto antes de </tbody></table>

    <tr><td>NUEVO 01</td>
    <td>NUEVO 02</td>
    <td>NUEVO 03</td></tr>

    No sé si te refieres a esto. Yo por tablas entiendo esto.

    ResponderEliminar
  34. Mmm, no,no es eso. Quiza no me explique bien. Tengo en mi ordenador instalado el usbwebserver, no se si te suena, PHP,Apache,Mysql,... y, escribiendo en mi explorador http://localhost:1234 accedo a unas tablas con datos recogidos de un servidor de juegos. Eso es lo que quiro poner en un post. Se que se puede poner en una web, porque ya lo he visto en alguna. ¿Es posible hacerlo en un post?

    ResponderEliminar
  35. Me sabe mal pero con eso no sé ayudarte. Pero sí te puedo decir que te pases por aquí: http://www.maestrosdelweb.com/editorial/phpmysqlap/

    A ver si te ayuda en algo.

    ResponderEliminar
  36. Hola de nuevo,
    Estoy tratando de hacer una tabla en mi blog como la que explicas en la entrada 34, pero tengo dos preguntas. Ahí explicas cómo se agregan filas, pero cómo agrego columnas?

    Y también quisiera que la tabla no fuera tan perfecta, sino que hubiera algunas casillas más grandes que otras, como aquí:
    http://www.ptclist.net/
    Cómo lo hago?

    Gracias de nuevo.

    ResponderEliminar
  37. Hola Red. Gracias por tu consulta. Te dejo el blog de mi amigo El Potro en el que encontrarás mucha información sobre tablas http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

    Un saludo.

    ResponderEliminar
  38. Hola

    Estoy intentando crear un menú de los juegos de los que hablo en mi blog en orden alfabético. Mi idea era crear una línea horizontal con las letras de la A a la Z que se desplegaran las distintas etiquetas.

    Voy bien salvo por un par de detalles que no se como cambiar:

    1. No me caben todas las letras en una sóla fila. Cabrían si achicara los márgenes de las casillas, pero no entiendo como hacerlo.

    2. Por algún motivo me sale todo en minúsculas, cuando en el código tengo puestas las letras y las iniciales en mayúscula

    Te agradecería tu ayuda. Si quieres ver mi blog, la dirección es http://elocioesjuego.blogspot.com

    Gracias!

    ResponderEliminar
  39. Xabier, gracias por tu visita y por tu comentario. Me hubiese gustado que leyeses la norma número 4) antes de comentar. Puedo entrar perfectamente a tu blog desde tu perfil de blogger, por lo que bastaba con dejar el nombre de tu blog. Si puedes por favor borra tu comentario y vuélvelo a escribir.

    Respecto al menú te recomiendo optar por otro menú de los que tengo disponibles en este blog, ya que el menú de esta entrada es muy limitado para lo que requieres. Para ello échale un ojo a:

    1) http://www.quierocrearunblog.com/2009/08/como-crear-un-menu-superior-horizontal.html
    2) http://www.quierocrearunblog.com/2009/09/como-crear-un-menu-superior-para-blog.html

    Con esos menús no tendrás problemas con la ortografía ni con el tamaño.

    Gracias por el comentario y gracias por tu visita. Disculpa por parecer "borde" pero es que las normas están para el bien de todos. Espero que lo entiendas.

    Saludos.

    ResponderEliminar
  40. Gracias por la respuesta y perdón por no haber cumplido la norma. Sinceramente no la vi.

    Respecto a la solución, el problema es que los menús que me das de opciones no son desplegables. ¿Hay alguna forma de hacerlos desplegables?

    ResponderEliminar
  41. Hola de nuevo Xabier. No te preocupes por lo del enlace ;D

    Lo siento mucho pero no puedo ayudarte con lo que pides. Si me entero de algo, sin duda aquí lo verás.

    Un saludo y disculpa.

    ResponderEliminar
  42. hola este exelente este post lo pondre en mi blog aver si me funciona porque se ve algo complicado pero en fin esta muy bueno y ya de paso queria preguntarte como se le hace para que la cabecera se parta en 2 y poder poner el buscador de google como lo tienes en tu pagina gracias espero tu respuesta seguimos en contacto

    ResponderEliminar
  43. Hola tebant21. Me alegro que te guste este blog.

    Lo de la cabecera lo tengo pendiente para crearlo en una entrada, ya que explicarlo por aquí sería muy difícil. Estáte atento al blog que lo añadiré pronto.

    Saludos y gracias por tu visita.

    ResponderEliminar
  44. Ola

    sabes mi plantilla html no tiene esto: div id='content-wrapper como lo hago?

    ResponderEliminar
  45. Hola Oscarito. ¿A cuál de tus tres blogs te refieres?

    ResponderEliminar
  46. hola...
    quiero kitar varias pestañas pero no se como...
    me podrias decir...

    ResponderEliminar
  47. Hola sakito. Fíjate que en el código: cada vez que abrimos un <li> se cierra con un </li> Si te fijas en esto último entenderás la estructura correctamente y podrás eliminar o añadir más secciones.

    ResponderEliminar
  48. Buendía
    intenté colocar menu desplegable en mi blog pero no resultó ser tan fácil, como lo comenté en la página de entrada hace ocho días empecé a construir el primer blog y mis conocimientos son nulos ¿quizá seleccione un tipo de menú muy complicado? Ni eso puedo responderle pero no despliega los submenus, y otra cuando te refieres a título, es el título superior de la página la dirección de tu página. ¿Estoy perdido?

    ResponderEliminar
  49. Hola Bruno. Te recomiendo que no empiezas empleando este menú. Es algo complejo si estás empezando. Mira en mi columna izquierda, en las etiquetas, en el apartado menús. Allí encontrarás varios más fáciles.

    Saludos, gracias por tu visita y por comentar.

    ResponderEliminar
  50. Hola. He modificado el menu de mi blog añadiendole una nueva categoria y agrupando otras en una sola, con lo que me añado un nivel mas. He revisado varias veces todos los li y ul y los tengo bien, pero me dice que tengo que cerrar un div cuando ya lo tengo cerrado. Pense en ponerte aquí todo el codigo pero es muy largo. ¿Que hago?

    ResponderEliminar
  51. Div sólo hay uno al empezar y otro para cerrar. Tiene que haber un "ul" o "li" mal formado. Revísalo a ver

    ResponderEliminar
  52. de acuerdo eso voy a hacer
    gracias
    un saludo

    ResponderEliminar
  53. ya me quedo pero yo quiero que el menu quede mas arriba como le ago?

    ResponderEliminar
  54. Hola digifobia. Lo lamento pero es menú es así. Un saludo y gracias por tu comentario.

    ResponderEliminar
  55. lei esta entrada y me parecio interesante ya que no usaste java.. (como muchos hacen)

    pero si entras a mi blog http://ani-top.blogspot.com

    veras que trae un menu en la parte suerior.
    quiero convertir ese menu en desplegable por ejemplo en musica hacer 3 sub menus

    1 Musica
    1.1 Anime
    1.2 J-Music
    1.3 Variada

    y asi con el resto .. me puedes ayudar ?

    otra cosa fuera de este tema .. en mi blog quiero hacer busqueda de varios labels (categorias a la vez ) por ejemplo buscar las entradas con las etiquetas anime y musica ... (solo las que tengan ambas etiquetas)

    ResponderEliminar
  56. Hola,

    Te doy la enhorabuena por esta entrada interesantísima y que es la única que me ha dejado hacer, pero tengo un problema y es que me sale todo el menú en vertical, no en horizontal como en el ejemplo y además, me sale completamente desplegado el menú...http://flweddingplanner.blogspot.com/

    que puedo hacer?

    gracias,

    ResponderEliminar
  57. @Kira. Hola Kira. Sólo se me ocurre que ese menú que ya tienes en tu blog, lo simplifiques (pongas menos opciones), y que añadas también éste que explico en la entrada. Respecto a buscar en dos categorías a la vez no se puede hacer nada al respecto. Blogger (blogspot) no es tan específico para estas cosas, tendrás que conformarte buscando etiqueta por etiquetas. Por esta razón siempre recomiendo tener pocas etiquetas y todas ellas bien organizadas. Saludos!

    @elquegrita. Hola. El enlace del blog que me has dejado me dice que no existe.

    ResponderEliminar
  58. perdoname por el enlace erróneo, el enlace real es este... http://creattingwedding.blogspot.com/

    Es que lo he cambio a lo largo del día de hoy y no me he acordado de modificar el comentario.


    Gracias,

    ResponderEliminar
  59. Hola compañero. Veo tu blog, pero no veo este menú colocado. De todas formas veo que has colocado otro que ya expliqué. Te queda fenomenal así.

    Saludos, gracias a ti.

    ResponderEliminar
  60. Si, la verdad es que me gustó bastante el que encontré después, pero una pregunta...no hay forma de eliminar el "subrayado" de puntos que aparece debajo de los botones al pasar por encima de él con el ratón?

    Y otra cosa, has visto la página flsahvortex.com? Te hacen banners, botones y menús como los tuyos, sólo que los colores son los que son porque tienes que pagar para poder utilizarlo!!

    Un saludo y espero respuesta!!!

    ResponderEliminar
  61. Hola elquegrita. Desconozco a qué puntos te refieres. ¿Puedes explicarlo o darme un ejemplo?

    Respecto a lo flashvortex sí lo conozco, es una buena opción para quien no tenga conocimientos de diseño.

    Un saludo compañero.

    ResponderEliminar
  62. HOLA A TODOS NECESITO SU AYUDA
    HE PROBADO LA BARRA EN MI BLOG Y FUNCIONA BIEN , PERO TENGO OTRO BLOG QUE LE CAMBIE LA PLANTILLA Y LA LINEA div id content-wrapper NO ME APARECE CUAL PEDE REMPLAZARLA; le quiete los mayor que para que me deje enviar el mensaje


    GRACIAS

    ResponderEliminar
  63. Hola. ¿Podría decirme a cuál de sus blogs hace referencia?

    Gracias.

    PD: Por favor, la próxima vez trate de no escribir en mayúsculas.

    ResponderEliminar
  64. Hola!
    bueno e probado el menu y de momento voi bien:
    Al principio del menu me sale: Inicio, COntacto, Sobre mi, Categorias y categorias 2
    Mi primera duda: lo de contacto, sobre mi, es problema de mi blog o es cosa del menu, si es asi desde donde se peude cambiar.
    Mi segunda duda: Necesito añadir mas partes desplegables al menu.. Como lo tengo que hacer?

    Gracias de antemano

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

    ResponderEliminar
  66. Ya e conseguido poner el menú..!
    Ahora quiero poner una barra entre cada pestaña como en el comentario 31, pero no me sale.
    Que tengo que hacer para que las mayusculas se mantengan?
    Gracias

    ResponderEliminar
  67. Hola!! Excelente la opción de menú, pero se me generó un problema.

    Cuando bajan las opciones de menú quedan detrás de otros objetos...

    Cómo hago para que se desplieguen adelante?

    El objeto que queda adelante del menú despegable es un reproductor de google, donde se puede escuchar una canción.

    Pueden ver de lo que hablo acá http://www.unpaseoporlafranja.com/ (Uso blogger, pero compré dominio propio. Todo lo digo haciendo en blogger)

    Muchas gracias!

    ResponderEliminar
  68. Hola amigos, estoy intentado crear un menú desplegable y al cambiarle el color sucede que según desde que pc se mire el color es diferente. ¿Cómo puede ser esto?
    He modificado el fichero CSS para que el color a mostrar sea verde.
    Podéis ayudarme. Gracias.
    www.fbmental.blogspot.com

    ResponderEliminar
  69. Hola!!!bueno te cuento. el caso es que yo ya tengo un menu en mi blog sencillito no? pero ahora quiero ponerle submenus en algunas pesatañas porque se me hace algo pequeño y no se como puedo hacerlo...lo he cogido de otra pagina y alli no me contestan y claro lo que no quería era cambiar de menu ahora porque ese me gusta claro, ¿me podrías ayudar? si es un si si quieres te paso el codigo de mi menu para ver si se le pueden añadir los submenus.
    un millon de gracias

    ResponderEliminar
  70. Hola Ani, si decides optar por este menú estaré encantado de ayudarte. Creo que si te gusta el otro menú deberías darle un poco del tiempo al creador para que te preste su ayuda. Son muchas peticiones que tenemos al día y a veces no nos basta el tiempo. A él le ocurrirá lo mismo.

    Espero que lo entiendas, saludos.

    ResponderEliminar
  71. yaaa pero es que le he escrito hace semanas!!!creo q la pagina ya no está activa porque no contesta ya a los comentarios...has entrado en mi blog para ver el menu???no se podría adaptar el que tengo???gracias

    ResponderEliminar
  72. lo que es el menu es super sencillo....solo tube que ponerle el estilo en la plantilla y luego crear un gadget html con cada etiqueta...pero claro es pedir mucho que la apañes jeje bueno pues lo dejaré asi..no se
    gracias

    ResponderEliminar
  73. Hola. Lo primero, muchas gracias. Después de mucho buscar, tu menú ha sido un descubrimiento, y tu explicación, la mejor y la más sencilla.

    Mi problema es que el menú aparece correctamente en Firefox, Safari o Explorer, pero en Google Chrome aparece separado de la cabecera (como si hubiera una banda blanca entre el menú y la imagen de la cabecera)

    ¿Alguna solución? Muchas gracias

    ResponderEliminar
  74. Por cierto, lo tengo colocado encima de la imagen de cabecera.

    ResponderEliminar
  75. He logrado solucionarlo con overflow:hidden.
    Perdona las molestias.

    ResponderEliminar
  76. Hola,

    Estoy desarrollando un blog y a la hora de intentar desplegar el menu por tercera vez este se ve mal y no permite ser seleccionado. Si lo ven lo entenderan mejor, el caso se da en provincia >>> barcelona.

    http://elquintosabor.blogspot.com/

    Muchas gracias de antemano

    ResponderEliminar
  77. Hola, no se que hice mal, primero en el codigo html de la pagina no encuentro id='content-wrapper'por lo cual decidi añadir un gadget html y pegar el codigo del paso 6 pero no me salen los submenus ni cuando esta recien pongo la estructura

    ResponderEliminar
  78. Buen día, coloque el menu el el siguiente blog de prueba http://pruebacegh.blogspot.com/, pero no se como colocarle para que la primera letra de las diferentes opciones me queden en mayúscula. ya se las cambie por aca:
    URL DE LA PAGINA >Inicio
    y siempre me salen en minúscula (inicio). De ante mano muchas gracias.... Saludos

    ResponderEliminar
  79. ahh. Otra cosita. Como hago para colocar el menu para que me aparezca debajo de la cabezera???? como aparece en el blog http://t360r.blogspot.com/,
    debajo de la cabecera.

    ResponderEliminar
  80. hola amigo queria saber como hacer para que mi menu sea en mayuscula me salio todo bonito pero quisiera que fuese en mayusculas quisiera saber donde tengo que cambiar he cambiado la fuente pero igual sale en minuscula
    y en en el titulo de los enlaces he escrito en mayusculas
    y ala hora de visualizar sale en minuscula te agradeceria tu ayuda

    ResponderEliminar
  81. @ quierocrearunblog tengo un pequeño problema al insetar el menu desplegable. resulta que no encuentro la indicación < div id='content-wrapper'> , es decir tras realizar la busqueda cn (ctrl + F)no me sale ningun resultado. A que se puede deber?

    ResponderEliminar
  82. como busco los codigo e intentado poner la barra de herramienta pero me vuelven a salir los codigos y solo una parte de la barra

    ResponderEliminar
  83. ayuda me este es mi correo Senluis_Alejandro@hotmail.com

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

    ResponderEliminar
  85. Hola desearía saber como configuraste el html de tu menu desplegable con sub-sub categorias.

    Tengo un problema, siguiendo lo que dice tu post no logro entender como poner la estructuracion de sub-sub menues.

    Ademas no entiendo el paso 5 ya que no encuentro en mi plantilla: <iv id='content-wrapper, ni como sugieren en un comentario que hay que poner el html estructurado antes de esa etiqueta o la siguiente: div id='sidebar-wrapper

    Desearía que me ayudes.
    Un abrazo.
    Lionel

    ResponderEliminar
  86. Ademas queria saber si la estructuracion se puede usar en otro tipo de menu desplegable con caracteristicas muy similares.

    Saludos

    ResponderEliminar
  87. En mi blog no aparece: la parte < div id='content-wrapper' >
    Expandiendo artilugios y sin espandir
    Que hago?

    ResponderEliminar
  88. a mi tampoco me aparece <div id='conten......

    como lo hago aparecer

    ResponderEliminar
  89. A nosotros tampoco nos aparece ni 'content-wrapper' ni 'sidebar-wrapper' con lo cual estamos colgados.

    ResponderEliminar
  90. si no encuentran el content-wrapper penguenlo antes de: class='content-cap-bottom cap-bottom

    ResponderEliminar
  91. Gracias Valiant. Con lo que dices tu me sale abajo del todo.
    Pero me ha servido, porque he estado haciendo pruebas y al final me queda bien si lo pongo antes de: class='header-cap-bottom cap-bottom'

    Muchas gracias por todo

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

    ResponderEliminar
  93. buenas amigo pero para hacer los menus con pestañas tengo que tener las entradas escritas? opsea lo que quiero es que las entrdas que hago no salgan en la pagina principal de mi blog sino en los menus desplegables como hago?

    ResponderEliminar
  94. No encuentro el código ni con Cntrl + F:

    div id='content-wrapper'

    ¿Qué puedo hacer? (No puedo seguir la 2ª parte sino lo encuentro)

    ResponderEliminar
  95. Hola disculpame, hice todos los pasos, y hasta arregle simbolos que me saltaban que faltaban y al terminar me salio este mensaje :
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The markup in the document preceding the root element must be well-formed.
    Error 500

    Podras ayudarme
    Mi blog es: MiPortalDiamante.
    Un fuerte abrazo, y muchas gracias por toda tu ayuda...LadyPato

    ResponderEliminar
  96. Hola, nuevamente lo intente dos veces, pero ya no me encuentra el "siderbar -wraper , ya que nunca antes me encontro el content-wraper, asi que me fue imposilbe seguir, ojala me puedas ayudar.

    Abrazoooo y esta genial tu page.

    ResponderEliminar
  97. GRACIAS ME MATE TRATANDO DE ENCONTRAR COMO HACER ESTOS MENUS...... AL FIN......SI TIENES TIEMPO ECHALE UN VISTAZO A MI BLOG:
    http://anime-dk4.blogspot.com/
    ......AUN NO LO TERMINO BIEN PERO ME FUNCIONA...JAJAJAJA

    ResponderEliminar
  98. Hola amigo como hago para colocar los enlaces del menu con la primera letra en mayuscula?

    ResponderEliminar
  99. Buenas amigo para los que no encuentran la etiqueta 'content-wrapper' por favor coloquen esta otra class='header-cap-bottom cap-bottom' y justo antes de ella colocan su menu y todo bien cualquier cosa avisenme si les srivio o para seguirlos ayudando, amigos quien sabe como colocar el la primera letra del menu en mayuscula? aviseme el que sepa estamos para ayudarnos mi blog es variedadespalencia.blogspot.com

    ResponderEliminar
  100. La solución para poner el menú en mayúsculas ya lo encontre

    solo sustiyan:

    text-transform: lowercase

    por:

    text-transform: uppercase


    Y listo, todo mayúsculas

    chequen mi blog ahi la llevo jajajaj

    http://cafesaludablegano.blogspot.com/

    ResponderEliminar
  101. Buenas noches variedades palencia y compañía.
    Como a muchos otros compañeros no aparece en mi plantilla:'content-wrapper' ni 'sidebar-wrapper'.
    Pues bien, he seguido todos los pasos y como indicais: la segunda parte del munú desplegable lo he colocado justo antes de: class='header-cap-bottom cap-bottom' y el problema, como puede verse en http://lareinadelachoza.blogspot.com/ es que el menú me sale al final del blog y yo lo pretendo bajo la cabecera.
    ¿Podríais echarme una mano?
    Gracias

    ResponderEliminar
  102. Repasando los mensajes he conseguido colocar el menú arriba.
    De todas formas gracias.

    ResponderEliminar
  103. Carnal no encuentro esta opcion
    div id='content-wrapper'
    me dice que no esta el ctrl f

    ResponderEliminar
  104. Hola quierocrearunblog

    Gracias por esta ayuda yo coloqué este truco en mi blog de prueba (http://pvillegasy.blogspot.com) y funciona pero cunado se desplega el menú este sale detras del contenido del blog.. ¿como puedo hacer para que el contenido del menú me salga or delante'

    Gracias

    ResponderEliminar
  105. ola!!!!!!! ammm mi pregunta es xq kuando coloco kualkiero menu me lo desconfigura, en este veo q son 5 categorias q esta extenso en mi blog solo me da hasta 3 y cuando lo modifico todo qda horrible y asi em pasa con todos los menus...xq????


    saludos!!!1

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

    ResponderEliminar
  107. Hola quierocrearunblog, he mirado que en otros navegadores como mozila y crome el menú funciona bien, pero en internet exporer se queda oculto detrás del contenido dle blog. ¿como puedo hacer para que se vea bien?, agradezco tu ayuda. mi blog de pruebas es: http://pvillegasy.blogspot.com

    Gracias

    ResponderEliminar
  108. No me funciona.
    Al cliquear el link (este te lleva a una etiqueta) en el submenú de una categoría no responde... Te lleva a la etiqueta el navegador pero no te la muestra.

    ¿Podrían ayudarme por favor?

    ResponderEliminar
  109. Hay forma de alinearlo a la izquierda ya que éste me sale centrado?

    ResponderEliminar
  110. Muchas gracias, por fin uno que funciona bien!!
    http://noqueados.blogspot.com/

    ResponderEliminar
  111. Se puede colocar un buscador personalizado dentro del menú? Al estilo como tiene Apple en http://www.apple.com/?

    Muchas gracias!

    ResponderEliminar
  112. Hola, me gusta este menu y me sirve para mi blog, pero el codigo HTML no lo he querido colocar en la plantilla, sino que lo puse directamente en un gadget, todo me quedo muy bien, pero....el asunto es que ahora no me funcionan los vinculos.
    Que puedo hacer???

    ResponderEliminar
  113. Hola he probado este menu pero mi problema es que al enlazar las URL de la etiquetas, no las encuentran porque se cambian la primera letra del enlace de mayuscula a minusculas, y por eso no coincide con el nombre de la etiqueta, que puedo hacer??

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

    ResponderEliminar
  115. Hola antes de todo decirte que este menú me ha servido mucho, gracias! El problema es que cuando paso el puntero sobre el menú desplegable éste submenú se muestra pero ya está, cuando quiero navegar por él desaparece y no responde si no insisto mucho, no sé si me explico. Como podría solucionar este problema? Gracias de antemano!

    ResponderEliminar
  116. hola saludos como puedo modificar el ancho o largo de mis submenus GRACIAS de antemano por tu respuesta

    ResponderEliminar
  117. Hola, lo que me gustaría saber yo, como posteo justo en ese menú, es decir si subo un nuevo post, que quiero que este en la pestaña del menú superior Titulo 1, como lo hago, tengo que escribir algún código html en la entrada del post?¿ ...

    ResponderEliminar