add

Crear un menú desplegable en Blogger


¿Por qué correr detrás de las secuencias de comandos, como jQuery, mientras que usted puede utilizar simplemente CSS y HTML para crear un menú desplegable para su blog o web. Ahora usted necesita aprender cómo crear un menú desplegable en la navegación. Estoy compartiendo un código sencillo aquí que se pueden personalizar completamente para realizar los cambios preferidos. 

Crear un menú desplegable en Blogger


Anteriormente di a conocer algunos estilos de Menú desplegable para blogger de los cuales les dejo los enlaces a continuación:

 
Así que vamos a ir a trabajar!


Cómo crear un menú desplegable?
 

Un menú desplegable adicional, es cuando se tiene demasiado contenido en su blog o web o te gusta mantener las cosas bien organizadas. Para agregar un menú desplegable para los blogs de Blogger haga lo siguiente:

1. Ir a Blogger, luego da un clic en Diseño

2. Seleccione un widget HTML/Javascript y pega el siguiente código en su interior.


Crear un menú desplegable en Blogger

<style>
#adbnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#adbnav {
    margin: 0;
    padding: 0;
}
#adbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#adbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#adbnav li a, #adbnav li a:link, #adbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      
}
#adbnav li a:hover, #adbnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
   
}
#adbnav li {
    float: left;
    padding: 0;
}
#adbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#adbnav li ul a {
    width: 140px;
}
#adbnav li ul ul {
    margin: -25px 0 0 161px;
}
#adbnav li:hover ul ul, #adbnav li:hover ul ul ul, #adbnav li.sfhover ul ul, #adbnav li.sfhover ul ul ul {
    left: -999em;
}
/*--www.ayudadeblogger.com
  www.abogadosasociados.com www.volantedeportivo.com Drop Down Menu ----*/

#adbnav li:hover ul, #adbnav li li:hover ul, #adbnav li li li:hover ul, #adbnav li.sfhover ul, #adbnav li li.sfhover ul, #adbnav li li li.sfhover ul {
    left: auto;
}
#adbnav li:hover, #adbnav li.sfhover {
    position: static;
}
#adbnav li li a, #adbnav li li a:link, #adbnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
  
}
#adbnav li li a:hover, #adbnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Inicio</a>
        </li>
        <li>
          <a href='#'>Temas</a>
       </li>
        <li>
          <a href='#'>Contactos</a>
        </li>
  <li>
           <a href='#'>Noticias</a>
            <ul>
                <li><a href='#'>Nombre 1</a></li>
                <li><a href='#'>Nombre 2</a></li>
                <li><a href='#'>Nombre 3</a></li>
              </ul>

        </li>
      </ul>
    </div>


Reemplace # con los links de su página y el texto en negrita con el nombre de las páginas pertinentes. El código de color amarillo resaltado es responsable del menú desplegable. Puede copiar y pegar en cualquier ficha que desee antes de </ li>

Para añadir otra pestaña simplemente pega este código antes del cierre </ ul>
 


<li>   <a href='#'>Nombre 4</a>  </li> 


Listo ahora ya tienes este menú horizontal con submenús en tu blog de blogger

Si deseas puedes realizar algunos cambios:

Para cambiar el color de fondo del menú principal, cambia # 060505
Para cambiar el color del tamaño de la fuente del texto, cambia el texto que se encuentra  en amarillo.  
Para cambiar el fondo de una ficha con el ratón estacionario, cambia # BF0100.
Para cambiar el color de fondo del menú desplegable, cambia # BF0100 .
Para cambiar el color de fondo del menú desplegable al pasar el ratón  estacionario, cambia # 060505.

3. Da un clic en "Guardar" y ya está, eso es todo!

Visite sus blogs para ver sus cambios

Si usted tiene alguna pregunta no dude en escribir.


62 comentarios:

  1. hey webmaster, gracias por esta publicacion que me sirvio de mucha ayuda, y sobre los widgets estan rebuenos en sus otras publicaciones.. saludos.......

    ResponderEliminar
  2. He seguido tu mismo esquema en mi blog y los mismos códigos y a mi no me funciona con internet explorer, con google chrome si, pero con internet explorer los desplegables se ven debajo del texto de la entrada con lo cual cuesta diferenciarlo.

    ¿Me puedes ayudar?

    ResponderEliminar
  3. Hola amigo no me sale los submenus, como te sale a ti en sitemat....ojala me puedas ayudar ya que estado intentando con otros que hacen submenus y nada siempre parace que falta algo...gracias

    ResponderEliminar
  4. Hola, necesito que porfavor me diga cómo cambiar el tamaño del menú, ya que me sale cortado y los submenús no se ven. Gracias...
    brismimo@gmail.com

    ResponderEliminar
  5. Hola Design, necesito que me envies la direccion de tu blog, para ver que es lo que estas haciendo mal y poderte ayudar de inmediato.
    Saludos..

    ResponderEliminar
    Respuestas
    1. Tengo el mismo detalle http://makinazul26.blogspot.mx/ y como puedo cambiar el fondo de blanco que tiene? saludos

      Eliminar
  6. aver si les sirve esto
    http://www.youtube.com/watch?v=Uirr0GtXGTQ

    ResponderEliminar
  7. He seguido el tutorial y me ha salido bien, pero tengo una pequeña pega .. y es que la pestaña desplegable no se queda fija para poder elegir un elemento de ella, me puedes ayudar??? Gracias

    ResponderEliminar
  8. Hola Aquario, vamos a realizar lo siguiente, borra todos los pasos que seguiste en este post, y mira este nuevo tutorial que publique, y solo necesitaras insertar un solo codigo y tendras el menu desplegable, a continuacion te dejo el link. http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
    Recuerda borrar todo el codigo de tu menu anterior para que puedas utilizar este nuevo menu. Cualquier pregunta no dudes en hacermelo saber.
    Saludos.

    ResponderEliminar
  9. Luis, muchísimas gracias por tu ayuda :), he tenido que volver a renombrar y enlazar todas las páginas, pero ha quedado genial...
    Seguro que te seguiré preguntando :(

    ResponderEliminar
  10. Hola Aquario, de nada, recuerda que estoy para ayudarte, y cualquier pregunta no dudes en hacermelo saber y de inmediato te respondere, un feliz año..
    Saludos...

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

    ResponderEliminar
  12. todo me funciona muy bien pero me gustaria saber como hacer que el menu solo se vea del tamaño de mi pagina, osea que no sevase el texto, no se si me entiendas, este es mi blog http://otakusgamersfrikis.blogspot.mx/

    ResponderEliminar
  13. Hola Felix, con respecto a tu pregunta, en el widget que se inserta el código del menú, debemos insertar un código pequeño el cual hará que se abra una nueva pagina. En la tarde te envió el código que deberás insertar en tu menú.
    Saludos.

    ResponderEliminar
  14. Hola Ángel, te quedo bien el menú en tu blog te felicito, lo que toca realizar es cambiar algunos puntos del código, me tocaría explicarte por interno, ya que se me haría muy largo la explicación por medio de este mensaje.
    Saludos.

    ResponderEliminar
  15. hola, eh tenido otro problema y es que quiero poner las pestañas desplegables y no eh podido, disculpa las molestias es que soy algo nuevo xD mi correo es zenzei.alchemist@gmail.com

    ResponderEliminar
  16. Gracias por tu excelente y didáctica explicación

    ResponderEliminar
  17. hola Ángel, ya te envié un mensaje directo a tu correo electrónico para ayudarte directamente.
    Saludos.

    ResponderEliminar
  18. Hola, la dirección de mi Blog es:
    designprojectarq.blogspot.com
    Gracias.

    ResponderEliminar
  19. Excelente me has ayudado mucho solo que no me funciona con internet explorer, con google chrome si funciona muy bien, pero con internet explorer los desplegables se ven debajo del texto de la entrada y pues no es nada visible e incomodo para usar...
    bueno agradeceria si pudieras ayudarme a corregir eso... Saludoss

    ResponderEliminar
  20. Hola Rodycan, con respecto a tu pregunta ha visto que algunos tienen problemas con su blog al utilizar internet explorer, es por eso que publique un nuevo post para que lo utilicen en su blog de deblogger, a continuacion dejo una explicacion:
    borra todos los pasos que seguiste en este post, y mira este nuevo tutorial que publique, y solo necesitaras insertar un solo codigo y tendras el menu desplegable, a continuacion te dejo el link. http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
    Recuerda borrar todo el codigo de tu menu anterior para que puedas utilizar este nuevo menu. Cualquier pregunta no dudes en hacermelo saber.
    Saludos.

    ResponderEliminar
  21. MUCHAS GRACIAS POR LA EXPICACION ME HAS AYUDADO MUCHO, PERO ESQUE RESULTA QUE SOY UN POCO TORPE Y NO SÉ COMO HACER QUE CUANDO LE DAS A UNA DE LAS PESTAÑAS DEL MENU TE APAREZCA ALGO, SIEMPRE ME DICE QUE ESTA PAGINA NO EXISTE EN EL BLOG. ESPERO QUE ME PUEDAS AYUDAR. GRACIAS

    ResponderEliminar
  22. Hola Lola, es por que no estas insertando bien el link de la pagina que quieras mostrar, debes insertar bien tu link en la parte que dice # y luego das un clic en guardar y listo mira tus cambios, si aun no lo puedes hacer comunicate con migo directamente a esta direccion para poder ayudarte en la configuracion: ayudadeblogger@gmail.com
    Saludos.

    ResponderEliminar
  23. HOla Luis, Tengo dos problemas:
    1) no me funciona en IE
    2) el paso /navegación de los menus de la barra principal a los menus secundarios no funciona.. ahi veces que pasa bien.. otras que no.. No sé si será porque he tenido que modificar el ancho de los menus secundarios manualmente..
    http://haciendopoliticadesdemicasa.blogspot.com.es/


    Muchas gracias de antemano!

    ResponderEliminar
  24. Hola Javier, borra todo lo que seguistes en este post todo el codigo, y sigue las instrucciones de este nuevo post que publique, ahi si te aparecera el menu en el internet explorer.
    http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
    Saludos.

    ResponderEliminar
  25. cuando voy a "Diseño" en ningun lugar me dice "Elementos de página"... ayuda...!!!

    Gracias.

    ResponderEliminar
  26. Hola Federico, da un clic en Diseño luego das un clic en añadir un gadget y buscas el widget que dice HTML/javascirpt y pones el codigo que se encuntra en el segundo paso. Y luego realizas los siguientes pasos.
    Saludos.

    ResponderEliminar
  27. Hola muchas gracias por toda la explicación, pero no me queda igual y soy algo novata, me podrías ayudar, no me salen los desplegables, y cuando coloco el ratón encima se queda blanco, mi blog es http://cuelgatusofertas.blogspot.com, muchas gracias

    ResponderEliminar
  28. Disculpa, solo me queda una duda, como puedo centrarlo?

    ResponderEliminar
  29. Hola, no necesitas centrarlo es automatico, ya biene en us configuracion.
    Saludos.

    ResponderEliminar
  30. Hola Luis te hago una consulta y espero que me puedas ayudar.
    http://pruebajoaquin.blogspot.com.ar/
    este es mi blog. Yo no tengo problema en editar el menu y hacerlo que funcione, lo que necesito saber y si me podes ayudar es a hacer que en cada pagina independiente osea en los submenu yo pueda publicar "entradas". nose si me explico. Buscando en la web encontre un chico que realizó algo asi: http://elblogdeelsant0.blogspot.com.ar
    el en sus submenus puede publicar entradas
    o nose como hace para que se les organizen. Intente hablar con el pero no responde, sera que es viejo el blogg.
    Desde ya estoy agradecido Luis.

    ResponderEliminar
  31. Hola, he visto tu blog y el blog que me enviastes, lo que el pone en los submenus son los titulos completos de la entrada que quiere mostrar, has lo mismo tu y veras que te sale igualito.
    Saludos.

    ResponderEliminar
  32. pero el crea como secciones por ej: COSAS PARA BLOGGERS y alli estan todas las entradas
    (?)

    ResponderEliminar
  33. Hola! este menú me ha ido genial. Mi problema es que querría personalizar el tamaño de algunas partes, pero no consigo averiguar cual es cada una... ¿sabes dónde podría encontrarlo? mil gracias por todo

    ResponderEliminar
  34. un saludo! disculpa, el menu ha salido tal como esperaba en mi blog, el problema es que no despliega los submenus, he notado que si amplio la altura del menu, si se despliegan, pero me queda un gran espacio por lo q no me sirve asi... habrá alguna forma de solucionarlo? este es el blog http://aliciaintoxicada.blogspot.com/
    un abrazo.

    ResponderEliminar
  35. Hola Luis......lo que sucede es esto....soy principiante en esto del blog....solo hasta hace un mes me comentaron que se podia hacer y he iniciado el proceso. http://carlospuelloarrieta.blogspot.com/.

    en este proceso lo que quiero saber es como agregar contenido a los menus que he creado y que cuando haga click me aparezca la informacion que coloque.....por ejemplo....en el menu ACERCA DE MI, incluí dos submenu, uno llamado perfil y otro experiencia......entonces lo que necesito es ...primero: como hago para ingresar la informacion en estos menus y segundo: como hacer para que cuando se haga click sobre estos menus me abra una pagina diferente a la de inicio.

    no se si estaré hablando locuras porque no se casi nada de esto, pero creo que lo que necesito es crear paginas que se conecten con los menus.....tu me diras si estoy equivocado

    gracias

    ResponderEliminar
    Respuestas
    1. Hola te envie un mensaje directo a tu pregunta.

      Saludos.

      Eliminar
  36. Hola maestro muy buena tu pagina, te cuento soy novato en esto de los blog y necesito ayuda tengo en pañales un blog y quiero implementarlo y dejarlo lo mejor que se pueda, haber si me das una manito, mi correo es cbravo3000@gmail.com te lo agradeceria mucho :) Gracias de ante mano.

    ResponderEliminar
    Respuestas
    1. Hola encantado en ayudarte.. ya te adjunto a mi chat ..
      Saludos.

      Eliminar
  37. Buenos días, cómo hago para darle más largo, ancho y cambio de color a mi menú??
    y cómo puedo añadir otra casilla del menú.

    ResponderEliminar
    Respuestas
    1. Hola, para añadir una nueva pestaña de menu, basta con isertar el siguiente codigo despues del termino del < /li>
      Inserta el siguiente codigo:
      < li>
      Sitemap
      < ul>
      < li>Sub Page #1< /li>
      < li>Sub Page #2< /li>
      < li>Sub Page #3< /li>
      < /ul>
      < /li>

      Saludos.

      Eliminar
  38. Hola, sabes que lo puse en mi blog, http://todouc.blogspot.com/ y se muy bien, pero quisiera saber, como cambiar las esquinas redondeadas en los pestañas desplegables?

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, el problema es que tu tienes un estilo diferente en la estructura de tu blog, es por eso que automaticamente se pone en ese tipo de redondeado en el submenu.
      Saludos.

      Eliminar
  39. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola si no te sale es por que no estas siguiendo bien las instrucciones, enteriormente publique un post sobre como instalar un menu desplegable con un solo widget , es mas facil de realizarlo, sigue el siguiente enlace: http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
      Saludos.

      Eliminar
  40. no se porque todos los tutoriales que busco de como hacer esto, ninguno explica claramente como ago para que se desplieguen los menus una ves puestos de forma orizontal, pues estos no se despliegan y no hay explicacion del porque :C

    ResponderEliminar
    Respuestas
    1. Hola, si aun no sabes como, te voy a dejar un nuevo tutorial el cual solo se lo inserta en un solo widget: http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
      Saludos.

      Eliminar
  41. HOLA LUIS NECESITO SABER COMO INGRESO CONTENIDO A LOS MENU Y SUB MENU DESDE MI BLOG expopuntaarteydiseno.blogspot.com. DARWIN

    ResponderEliminar
  42. HOLA LUIS RECIEN TE ENVIE UNA INQUIETUD PARA SABER INGRESAR CONTENIDOS EN MI MENU DE EXPOPUNTAARTEYDISENO.BLOGSPOT.COM TE DEJO MI E-MAIL. expopuntaarte@gmail.com. DESDE YA TE AGRADEZCO LO QUE PUEDAS HACER. DARWIN

    ResponderEliminar
    Respuestas
    1. Hola, he visto tu blog, pero no tiene ningun menu desplegable, cuando lo tengas te ayudo.
      Saludos.

      Eliminar
  43. Hola buen aporte... Pero tengo el mismo problema que no puedo ver los submenus.
    mi blog es: http://apu-adventure.blogspot.com/2013/10/ica-aventura-mar-y-desierto.html..
    espero que me puedas ayudar... sldos

    ResponderEliminar
    Respuestas
    1. Hola, no encuentro el codigo en tu blog
      Saludos.

      Eliminar
  44. Hola luis, buen aporte!! Pero tengo un problema y es que la segunda fila sale diferente y queda muy feo. La dirección del blog es http://jugandoalbiencomun.blogspot.com.es/ me harías un grandísimo favor si me dijeras como solucionarlo puesto que el blog va a ser enviado a un concurso. Saludos y gracias :)

    ResponderEliminar
  45. Hola,
    Muchas gracias por toda la información. Quería hacerte una pregunta a ver si puedes ayudarme con esto de los menus desplegables.Tengo una plantilla simple de blogger y he instalado uno de estos menus desplegables y en principio funciona vez, pero una vez he terminado al actualizar y ver la página del blog me sale justo debajo una sombra grande de una herramienta cruzada, como el icono que tenemos para editar, y no sé a qué se debe y cómo hacer que desaparezca.Muchas gracias de antemano ;-)

    ResponderEliminar
  46. Hola gracias por la ayuda. ¿Podrias explicar cuales son lso parametros para cambiar la separacion entre pestañas y/o el margen superior entre los desplegables y el menu fijo? Ando probando y probando pero no doy con ello... Gracias

    ResponderEliminar
  47. Que tal Luis. Gracias por compartir tus conocimientos. Tengo una pregunta. Como puedo hacer para que los submenús de un menú principal se expandan ya sea para la izquierda o para la derecha dependiendo del tamaño de la pantalla de la computadora. Te dejo mi blog para que mires cual es el problema que tengo: encuentralocerca.blogspot.com

    ResponderEliminar
  48. Hola. He seguido las instrucciones y sale todo muy bien, pero el menú sale DESPLEGADO.

    ¿Me pueden ayudar?

    ResponderEliminar
    Respuestas
    1. Hola Orpherius, gracias por escribir, con respecto a su pregunta, le sugiero me deje la dirección URL para poder ver lo que puede estar sucediendo

      Saludos

      Eliminar
  49. Hola disculpa segui las instrucciones y el menu me sale de color blanco no se que hice mal te paso mi direccion para que me puedas a ayudar a verificar que tengo mal http://jassofer.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola Fernando, gracias por escribir, con respecto a su pregunta, por favor, elimine el código que ingreso en el widget, luego, vuelva a insertar el código tal como lo muestro en este tutorial, tal vez usted modifico algún código y es el motivo por el cual le sucede lo que usted indico.

      Quedo atento a su respuesta

      Cuenteme como le fue,

      Saludos

      Eliminar
  50. hola segui las instrucciones del menu despegable pero no se ve sale en blanco hasta que paso el mouse quisiera ver si me puedes ayudar te dejo mi direccion para que ver si me puedes ayudar http://jassofer.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola Fernando, respondí a su comentario, por favor revíselo.

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios