Como agregar un menú para mi blog de blogger con un solo widget


Muchos me han preguntado si es posible instalar un menú para blogger con un solo widget y no entrar en el código HTML de su blog para poder insertarlo, la verdad si es posible, hoy van a aprender como agregar un menú en su blog de blogger con un solo widget, es un solo paso.

Como agregar un menú para mi blog de blogger con un solo widget

A continuación mire su demostración


Luego de que hayan visto la demostración y ver como funciona vamos a trabajar.

1 Ir a blogger
2 Dirigite a “Diseño”, de un clic donde dice “añadir un gadget” y busca un widget que dice “HTML/Javascript”, ábrelo y pega el siguiente código.

<style>
#ayudadebloggernavbar {
    background: #3B5998;
    width: 100%;
 
    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#ayudadebloggernav {
    margin: 0;
    padding: 0;
}
#ayudadebloggernav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#ayudadebloggernav li {
    list-style: none;
    margin: 0;
    padding: 0;
     
}
#ayudadebloggernav li a, #ayudadebloggernav li a:link, #ayudadebloggernav li a:visited {
    color: #FFF;
    display: block;
   font:bold 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 11px 12px;
        text-decoration: none;
        border-right:0px solid #627AAD;
}
#ayudadebloggernav li a:hover, #ayudadebloggernav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 11px 12px;
     
 
     
}
#ayudadebloggernav li {
    float: left;
    padding: 0;
}
#ayudadebloggernav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#ayudadebloggernav li ul a {
    width: 140px;
}
#ayudadebloggernav li ul ul {
    margin: -25px 0 0 161px;
}
#ayudadebloggernav li:hover ul ul, #ayudadebloggernav li:hover ul ul ul, #ayudadebloggernav li.sfhover ul ul, #ayudadebloggernav li.sfhover ul ul ul {
    left: -999em;
}
#ayudadebloggernav li:hover ul, #ayudadebloggernav li li:hover ul, #ayudadebloggernav li li li:hover ul, #ayudadebloggernav li.sfhover ul, #ayudadebloggernav li li.sfhover ul, #ayudadebloggernav li li li.sfhover ul {
    left: auto;
}
#ayudadebloggernav li:hover, #ayudadebloggernav li.sfhover {
    position: static;
}
#ayudadebloggernav li li a, #ayudadebloggernav li li a:link, #ayudadebloggernav li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
 
}
#ayudadebloggernav li li a:hover, #ayudadebloggernav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
 
}

#ayudadebloggernav li li li a, #ayudadebloggernav li li li a:link, #ayudadebloggernav li li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
    margin: 1px 0 0  -14px;
 
 
}
#ayudadebloggernav li li li a:hover, #ayudadebloggernav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}
</style>
<div id='ayudadebloggernavbar'>
          <ul id='ayudadebloggernav'>
            <li>
              <a href='/'>Inicio</a>
            </li>
            <li>
              <a href='#'>Quienes somos</a>
           </li>
            <li>
              <a href='#'>Contactos ▼</a>
<ul>
        <li><a href='#'>Facebook 1</a></li>
                        <li><a href='#'>Twitter 2</a></li>
                        <li><a href='#'>Google+ 3</a></li>
 </ul>              
            </li>
<li>
              <a href='#'>Categorias ▼</a>
<ul>
        <li><a href='#'>Temas 1</a></li>
                        <li><a href='#'>Temas 2</a></li>
                        <li><a href='#'>Temas 3</a></li>
 </ul>              
            </li>
<li>
              <a href='#'>Temas ▼</a>
<ul>
        <li><a href='#'> Tema 1</a></li>
                        <li><a href='#'> Tema 2</a></li>
                        <li><a href='#'>Tema 3</a></li>
 </ul>              
            </li>    
 <li>
               <a href='#'>Sitemap ▼</a>
                <ul>
                    <li><a href='#'> Tema 1</a></li>
                    <li><a href='#'> Tema 2</a></li>
                    <li><a href='#'>Tema 3</a>
                   <ul>
                    <li><a href='#'>Sub Tema 1</a></li>
                    <li><a href='#'>Sub Tema 2</a></li>
                    <li><a href='#'>Sub Tema 3</a></li>
                  </ul>
</li>
                  </ul>
            </li>
          </ul>
        </div>


Ahora solo da un clic en "Guardar" y listo, ya tienes un menú para tu blog de blogger.

Y si quieres aumentar más opciones a tu menú basta con poner el siguiente código después del cierre de </li>

<li>
<a href="#">Información</a>
</li>


Eso es todo espero te haya servido de mucha ayuda

¿Necesitas ayuda?

Cualquier pregunta no dudes en hacérmelo saber y de inmediato te responderé.

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

114 comentarios:

  1. Muy bueno Hermano me dunfiono de maravilla lo q quiero saber es como le inserto un link por ejemplo a home ?

    ResponderEliminar
  2. Hola Peliculas Online:
    Para que insertes el link en home, lo puedes hacer en la parte que esta puesto el signo numeral "#", espero te haya servido de ayuda, saludos..

    ResponderEliminar
  3. eres el mejor hermano te lo agradesco muchisimo este es mi blogger por si lo quieres ver http://elblogdelaspelicula.blogspot.com

    ResponderEliminar
  4. Hermano otra pregunta Como ago para crear una pag de categoria de terror otra de aventura etc pero que no aparesca como una entrada nda mas q aparesca cuando uno le de click en el menu desplegable te doy mi facebook para q me puedas esplicar mejor claro si quieres : https://www.facebook.com/esnaider.alberto

    ResponderEliminar
  5. Ok acepta mi invitacion de facebook ok
    mi invitacion es luchochavez2003@yahoo.com
    en este momento estoy conectado para ayudarte en lo que quieras.
    Saludos..

    ResponderEliminar
  6. Hola @Luis o @PeliculasOnline yo estoy haciendo lo mismo, pero no se como, ya he dado un monton de vueltas, si alguno me puede ayudar les agradeceria.

    ResponderEliminar
  7. hola Jhonattan Vega, dime que parte es lo que no entendistes para poderte ayudar, o buscame en facebook como luchochavez2003@yahoo.com estare esperando tu solicitud o peguntame directamente aqui.
    Saludos..

    ResponderEliminar
  8. Feliz Año Nuevo Luis !!!, ya estoy otra vez liada con esto y ahora mi cuestión es la siguiente ... como tengo que hacer para que las imagenes que subo al blog no se puedan descargar?, le tengo puesto un código, en el que si le das con el botón derecho te sale un mensaje de "opción deshabilitada" y no te deja descargar, pero si pinchas directamente en la foto, esta se agranda y entonces si te deja con el botón derecho guardarla en tu ordenador. Me he expresado bien???

    ResponderEliminar
  9. Hola Aquario con respecto a tu pregunta, es facil, tienes que entrar en tus entradas y das un clic en editar y luego das otro clic en el icono que se encuentra en la parte izquierda de tu post el cual dice HTML, en el cual busca un codigo como este: <a href="http://1.bp.blogspot.com/-o-Lsa87EHZY/UMp1ERkEwMI/AAAAAAAABec/s11nwSMYY_Y/s1600/Volver%C3%ADa+ayudade+de+blogger.JPG" y remplaza la parte que dice: http://1.bp.blogspot.com/-o-Lsa87EHZY/UMp1ERkEwMI/AAAAAAAABec/s11nwSMYY_Y/s1600/Volver%C3%ADa+ayudade+de+blogger.JPG, por la direccion de tu blog, un ejemplo te quedaria asi: <a href="http://ayudadeblogger.com" con eso ya no podran copiar las fotos y con el codigo que tienes puesto para que al momento que le den clic derecho y quieran copiar no puedan eso te ayudaria mucho, sobre todo con el codigo que dices que tienes para que no copien tus fotos, eso es todo, espero te haya servido de ayuda.
    Saludos...

    ResponderEliminar
  10. Gracias de nuevo Luis, ya lo tengo :)el resultado es que me lleva al inicio del blog, no da opción a que se vea la imagen en grande.

    ResponderEliminar
  11. Hola Aquario, esa es la idea con eso no te copiaran tus fotos.
    Saludos..

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

    ResponderEliminar
  13. Hola Steward, el menu funciona correctamente lo puedes ver en mi blog de demos, tal vez algo estas haciendo mal. Si puedes enviame la direccion de tu blog para yo poder ver que estas haciendo mal.
    Saludos.

    ResponderEliminar
  14. hermano luis un saludo de caracas venezuela
    podrias explicar mejor el paso 7? soy algo novato en este tema y no conprendo donde es q debo colocar el "dropdown1" y el mbt_nav, disculpa la molestia

    ResponderEliminar
  15. y me refiero al post sobre el efecto de jQuery! el paso 7

    ResponderEliminar
  16. Hola te dejo la direccion de mi correo para explicarte claramente, ayudadeblogger@gmail.com
    enviame un mensaje directo y te describire los pasos a seguir.
    Saludos.

    ResponderEliminar
  17. HOla, Luis! Inserto el código pero el submenu se me queda cortado y es como si el fondo estuviera encima de él.
    El blog es 19descenso.blogspot.com

    Gracias!

    ResponderEliminar
  18. Hola he visto tu blog, y el menu no sale como debe de quedarte, es porque la estructura de tu blog es muy diferente a las otras plantillas, pero para todo hay solucionm es un truco muy facil de realizar, ahora lo que necesitas hacer es, dirigirte a plantilla, editar html y buscar el codigo que se encuentra justo debajo de la imagen principal que tienes en tu blog, y poner ahi el codigo del menu.
    Si no sabes como acontinuacion te dejo la direccion de mi email para ayudarte por interno: ayudadeblogger@gmail.com
    Saludos.

    ResponderEliminar
  19. como hago para que los menu me lleven a otra pagina

    ResponderEliminar
  20. Hola Jean, es facil, donde dice # inserta el link de cualquier pagina que quieras mostrar, y donde dice Sub Page, cambialo por cualquier nombre, eso es todo.
    Saludos.

    ResponderEliminar
  21. Hola! acabo de insertar el códig y tengo un problema, no se ven los desplegabales :(
    Que hago??
    Gracias
    Este es mi blog
    http://www.passion4nails.es/

    ResponderEliminar
  22. Hola, con respecto a tu pregunta se debe a que tu has realizado algunos cambios en tu blog de blogger. He visto tu blog, la unica solucion para esto es que ingreses todo el codigo dentro de tu codigo HTML. Debes ingresar a plantilla, Editar HTML y buscar el codigo que se encuentra despues de la imagen principal que se encuentra en tu blog. Y ahi deberas insertar todo el codigo.
    Si no sabes como hacerlo te puedo ayudar, a continuacion te dejo la deireccion de mi e-mail: ayudadeblogger@gmail.com
    Enviame un mensaje directo y activa el chat de gmail, para poderte guiar.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Amigo Luis, como hago para colocar otro sub menu dentro de un sub menu ?

      Eliminar
    2. Hola, es muy buena tu pregunta, lo tendre en mente para realizar un artículo sobre Como insertar un submenu dentro de un submenu, atento a mis nuevas actualizaciones. Saludos.

      Eliminar
  23. Buenos días Luis y muchas gracias por tu ayuda.
    He insertado el nuevo codigo y me va genial en Mozila, pero no muy bien en Internet Explorer. Tengo la version 9. Las subcategorias parpadean y no se pueden selecionar, y salen como en transparente. Me puesde echar un vistazo al blog? http://fdefifi.blogspot.com.es/
    Esta en contrucciín.
    Gracias de antemano

    ResponderEliminar
  24. Hola de nuevo, he podido mirar un poco más, y las 2 primeras subpestañas van, y la tercera no.
    Que puedo hacer?

    ResponderEliminar
  25. Hola estube en tu blog y no veo que se despleguen las suppestañas de tu menu. Y por favor se un poco mas explicativo para poder guiarte en la implementacion del codigo, y asi poder ayudarte en lo que necesitas.
    Saludos.

    ResponderEliminar
  26. Buenas tardes Luis, Gracias. Siento no haber sido más explicita. ya me funciona. Gracias.

    ResponderEliminar
  27. Hola Luis, soy nuevo en esto y estoy creando un blogg para mis alumnos. esta idea me funcinó de maravilla y el blogg lo creé gracias a tus orientaciones. Mi consulta es: en el menú desplegable logro que me funcionen los linck pero me queda una celda de espacio entre uno y otro y no se ve bien, no se si me explico. deseo eliminar ese espacio. Mi blog es http://fisica6to.blogspot.com Enormemente agradecido muy profesional lo tuyo, saludos

    ResponderEliminar
  28. ya lo arreglé, observando los comandos vi que se repetían. Gracias de nuevo, estoy aprendiendo mucho, espero les sirva a mis alumnos. Saludos cordiales

    ResponderEliminar
  29. Hola Walter, es bueno saber que lo hayas arreglado tu mismo te felicito, vi tu blog excelente trabajo.
    Saludos.

    ResponderEliminar
  30. hola luis me gustaria saber como hacer para q cuando pinche a un enlace se abra en una pestaña o ventana nueva,gracias

    ResponderEliminar
  31. Hola, enviame un mensaje directo a: ayudadeblogger@gmail.com
    Indicando lo que necesitas, y te enviare el codigo de insercion.
    Saludos.

    ResponderEliminar
  32. ya te lo envie luis,gracias por tu ayuda

    ResponderEliminar
  33. Hola Luis, una pregunta, ya que leí casi toda tu pagina y no encontré jeje: se puede hacer una caratula en la pag de inicio del blog en vez que salga tu ultima entrada? porque no me permite 0 nro de entradas y quedaría muy bien visto. Saludos y gracias, la semana que viene comiezo las clases y lo comenzaré a utilizar.

    ResponderEliminar
  34. hola claro que se puede, necesito que me envies la direccion de tu blog para indicarte como hacerlo.
    Saludos.

    ResponderEliminar
  35. http://fisica6to.blogspot.com es la direccion, muchísimas gracias y perdón por tantas molestias

    ResponderEliminar
  36. muchas gracias por el post me ha ayudado mucho! así ha quedado mi blog http://enelpaisdelasbodas.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog te quedo estupendo te felicito, has hecho un buen trabajo
      Saludos.

      Eliminar
  37. Hola buenas tardes, he insertado el código de arriba en mi plantilla en editar HTML y me aparece bien, pero soy incapaz de cuando pincho en cualquiera de las opciones y de los despegables se reedireccione a la pagina correspondiente. Mi blog es cursoblogsamparamonycajal.blgspot.com, por favor explícame como lo hago.
    Muchas gracias de ante mano

    ResponderEliminar
    Respuestas
    1. Hola para insertar un link en tu menu necesitaras borrar el simbolo de numeral # de cada una de ellas y en vez de esa inserta el link de los post que quieras mostrar en tu menu.
      Por ejemplo:

      href='#'>Home
      href='#'>Quienes somos

      borra el simbolo numeral # e inserta ahi el link de tu post por ejemplo asi te quedaria

      href='http://www.ayudadeblogger.com/2012/11/sobre-el-autor.html'>Autor

      Eso es todo has lo mismo con todos y cambia los nombres por los que tu quieras,.
      Saludos.

      Eliminar
  38. Muchísimas gracias, ya me funciona perfectamente.

    ResponderEliminar
  39. http://descargartodopormega.blogspot.com.ar/

    ResponderEliminar
  40. esta super gracias eso era lo ke necesitaba

    ResponderEliminar
  41. Hola, estoy utilizando tu código, pero tengo un problema que veo que le ha pasado a alguien más. Cuando inserto el menú, no se me despliega, he tenido que "inventar" una historia para que funcione, pero evidentemente, no es la mejor solución. ¿Podrías ayudarme?
    Gracias.
    El blog en el que estoy utilizando el código es http://salasorpresas.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, y logicamente vi que has puesto unos puntos, el codigo es muy sencillo y facil. El problema es que alguno digo de tu plantilla esta ocacionando el error al no mostrar el menu desplegable,,
      Te puedo ayudar, tienes que dejarme tu insidencia directamente en esta direccion: ayudadeblogger@gmail.com
      Saludos.

      Eliminar
  42. como cambio el color del menu despegable ? q no salga el color azul , quiero otro color

    ResponderEliminar
    Respuestas
    1. Hola, en la tercera fila del codigo encontraras este codigo background: #3B5998 cambia este codigo de color 3B5998 y pon el codigo de color que quieras.
      Saludos.

      Eliminar
  43. Hola!!! Acabo de usar tu código y tengo un problema, aparecen los menús principales pero cuando se debieran desplegar los sub menús no aparecen.
    Este es mi blog: newupdatesblog.blogspot.com
    Espero que me puedas ayudar
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, algunas plantillas para blogger, presentan este inconveniente, si quieres que yo lo haga y lo ponga correctmente, enviame un mensaje directo a esta direccion: ayudadeblogger@gmail.com
      Indica tu insidencia y te ayudare por interno..
      Saludos.

      Eliminar
  44. HOLA MEN TENGO UN INCONVENIENTE CON EL CÓDIGO HICE TODOS LOS PASOS, EL MENÚ PRINCIPAL SALE, EL "SUB-MENU" TAMBIÉN PERO EL "SUB-SUB-MENÚ" NO ME SALE. AUN LO TENGO TAL CUAL APARECE.
    ESTE ES MI BLOG:http://altosinuurbano.blogspot.com/
    LE AGRADEZCO ME COLABORE...

    ResponderEliminar
  45. Buenas tardes Luis.
    He instalado el menú desplegable siguiendo tus indicaciones, pero tengo el inconveniente (parece ser que como a otros compañeros) de que no se ven los desplegables de submenú y subsubmenú.
    Es una buena herramienta para tener todo más ordenado, y si pudieras ayudarme te lo agradecería mucho.
    Te dejo el enlace a mi blog:
    http://budotoledo.blogspot.com.es/
    Muchas gracias de antemano por tu interés.

    ResponderEliminar
    Respuestas
    1. Hola, ya te envie la respuesta a tu correo electronico
      Saludos.

      Eliminar
  46. Gracias por la excelente ayuda y la excelente página. Tuve algunos pequeños problemas pero serán solucionados...

    ResponderEliminar
  47. Hola, me estoy iniciando en este mundo del blog Ya lo tengo casi echo pero necesito un copo de ayuda. Necesito menus desplegable que siguiendo tus consejos ya he puesto en mi blog. Ahora como meto la información dentro de cada punto o subpunto.

    Mi blog es bach-musical.blogspot.com.es

    Rogaría me contestase. Gracias

    ResponderEliminar
    Respuestas
    1. Hola, busca este simbolo # que se encuentra despues de href= e inser la url de la pagina que quieras mostrar.
      Saludos.

      Eliminar
    2. No termino de enterarme. Te explico lo qque quiero hacer. Tengo un menú desplegable llamado videos. A partir de el aparece curso 2012-2013. En ese submenú quiero meter 6 videos de este curso.
      donde los meto y como???
      No se si me he explicado

      Eliminar
    3. Hola enviame la direccion te tu blog para poder verlo y decirque que es lo que debes hacer.
      Saludos.

      Eliminar
  48. hola Luis, estoy trabajando en una pagina web con dreamweaver, ya tengo todo diseñado, lo único que quiero es hacer el menú desplegable, pero no quiero cambiar todo el diseño, la pregunta es:
    ¿Que linea de código puedo aumentar a mi CSS para que sea desplegable?

    ResponderEliminar
  49. ¡Hola Luis!

    Tu tutorial me está sirviendo de muchísima ayuda, pero me da un problema que no se muy bien cómo arreglar.

    Sírvete tú mismo porque explicarlo, lo veo complicado. Fíjate en las subpáginas, el error que dan al pasar el ratón por encima.

    ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. El menu funciona perfectamente, voy a actualizar este post y explicarlo mejor.
      Saludos.

      Eliminar
  50. Hola luis el codigo que pegaste funciona casi perfecto pues tiene algunos bugs como el ancho de las columnas desplegables y además que el SUB SUB MENU no se despliega uso plantilla simple desde cero este es mi blog en construccion http://telexfreeinversionistas.blogspot.com/ serías tan amable de decirme como puedo hacer aparecer el bendito SUB SUB MENU

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, y no es el menu que esta en este post.
      Saludos.

      Eliminar
  51. Hola que tal, saludos. Muy bueno, me ha servido de maravilla, solo tengo dos preguntas: ¿Como puedo hacerle para que los elementos de la barra (las secciones) queden de lado derecho y no del izquierdo? y ¿Como podría ocupar el todo ancho de mi blog?
    Aqui mi blog: http://tuamistosovecinorafatos.blogspot.mx

    De antemano gracias y !saludos!

    ResponderEliminar
    Respuestas
    1. Hola, tocaria cambiar una parte del codigo, espero tener mas tiempo y asi poder publicar un tema como lo que tu dices.
      Saludos.

      Eliminar
  52. hola,me ha ayudado mucho tus post, he utilizado tu barra desplegable de este post, y la he alterado para conseguir algo mas personal, el problema es que no consigo eliminar el recuadro gris que sale alrededor, ¿como lo puedo hacer? y ¿seria posible que los botones quedaran centrados?
    muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola, en tu pregunta, no consigo eliminar el recuadro gris? sobre esa pregunta te explico que no puedes eliminar el cuadro gris, solo podras cambiar de color en esta posicion background: #EDEFF4; cambia el codigo de color EDEFF4 por el que tu quieras.
      Saludos.

      Eliminar
    2. no se si no me exprese bien, si te fijas cuando entras al blog http://joakopalomar.blogspot.com.es/ alrededor del conjunto de los botones aparece una linea gris que me gustaría eliminar o que quedara en blanco pero no consigo la forma de hacerlo

      Eliminar
  53. Hola Luis, gracias por tu trabajo. Yo tenía puesto como menú superior el gadget "Paginas" en horizontal que se puede elegir en blogger y mi idea era sustituir el gadget por un menu igual pero que permitiera desplegarse. He usado tu código y lo he adaptado al estilo que buscaba y me ha quedado tal como quería excepto por una cuestión. No soy capaz de que el menú deje seleccionada la página en la que estoy. Con el gadget páginas activado, cuando voy a una página ésta se queda seleccionada en el menú mientras estoy en ella, se queda marca. Quiero conseguir ese efecto con tu código, podrías ayudarme? Gracias

    ResponderEliminar
    Respuestas
    1. Hola, no entiendo a su pregunta..
      Saludos.

      Eliminar
    2. Me refiero al efecto que se puede ver en este ejemplo. Mirando ese menú de navegación se ve claramente que estamos en la página 3 porque está marcado diferente a los demás además de que no es un enlace en el que se pueda pulsar porque es el sitio donde nos encontramos. Quiero conseguir ese efecto en el menú desplegable. Creo que es con el atributo .selected para enlaces, pero no sé integrarlo. Puedes ayudarme? Gracias

      Eliminar
  54. Hola, Muchisimas gracias por explicar tan claro algo que para los que no sabemos de esto es tan complicado.
    Me gustaría hacerte una pregunta, una vez que está el menú desplegable insertado en el blog, como tengo que hacer para editarlo, es decir escribir contenidos dentro, añadir más pestañas al menú, en definitiva como usarlo.
    Muchísimas gracias

    ResponderEliminar
  55. Hola, solo necesitas cambiar en los nombres que estan marcados de diferentes colores por los nombres que tu quieras.
    Saludos.

    ResponderEliminar
  56. Hola Luis. Muchas gracias por todos tus consejos, no sé qué haría sin tu blog porque no sé nada de HTML jajaja. Esta es más o menos la tercera vez que intento crear un menú desplegable y no me funciona.. para nada. Seguí todas las instrucciones y creé el Widget y aún así no me sale nada diferente. Nada de nada. Ni siquiera cambió el menú. ¿Podrías ayudarme? El link del blog es: http://literaturaromanticajuvenil.blogspot.com/.

    ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog y si veo que funciona el menu perfectamente.
      Saludos

      Eliminar
    2. Luis:
      Tienes razón. Muchas gracias por tu ayuda pero quería hacerte una pregunta más: después de 'cacharrearle' un poco (como dicen en mi país), el menú funcionó y logré centrarlo, pero luego de di cuenta de que cuando entro desde la plantilla para dispositivos móviles (bien sea desde un Android o desde OS), el menu desplegable no funciona. No se desplega y en algunos casos ni siquiera funcionan los hipervínculos. ¿Podrías ayudarme?

      Muchas, muchas gracias.

      Eliminar
    3. Hola, toca habilitarlo para que funcione en los dispositivos mobiles, deberiamos ingresar esl codigo en el Editor HTML de la plantilla, y luego poner sus estilos mobiles para que asi tengas un identificador y funcione... Tal vez con el tiempo publicare con exactitud este truco de blogger en un tutorial. Mientras tanto recuerda suscribirte y asi puedas recibir mis nuevas actualizaciones directamente en tu correo electronico..
      Saludos.

      Eliminar
    4. Hola amigo, he utilizado tu modelo de menu, pero me aparece en blanco, y se quita al pasar el mouse momentaneamente...
      http://bellaspalabrasdealiento.blogspot.mx
      espero puedas ayudarme gracias

      Eliminar
  57. Hola Luis, tengo un gran problema. Estoy renovando mi blog con nuevos menus para que haya más espacio limpio y la idea de poner menus desplegables es la mejor opcion. Intenté colocar el menu que explicabas en "http://www.ayudadeblogger.com/2012/06/crear-un-menu-desplegable-en-blogger.html" pero no me funcionó (despues del trabajo de haberlo personalizado) y ahora con las explicaciones de este post tampoco funciona y empiezo a preocuparme por si los codigos de los anteriores menús dificultan a los nuevos que quiero poner. El blog es el siguiente www.tusramosdenovia.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog y el menu funciona perfectmanete, y los antiguos codigos no lo dificultaran, no te preocupes...
      Salduso.

      Eliminar
  58. Hola Luis, he visto este tutorial y me he decidido a ponerlo en práctica en mi blog: http://notorious-shirts.blogspot.com.es/. Hacemos camisetas y pensaba poner un menú desplegable con todas las secciones y si es para ella o para ellos. El problema es que no sé como hacer que las entradas manuales con los diseños se clasifiquen... no sé si me he explicado bien... si puedes echarle un ojo y decirme qué debo hacer, te lo agradecería, gracias!!

    ResponderEliminar
    Respuestas
    1. Se clasifican mediante etiquetas, si es lo que entendi en tu mensaja, si no sabes como usuar las etiquetas sigue este post: http://www.ayudadeblogger.com/2013/04/que-es-una-etiqueta.html

      Saludos.

      Eliminar
  59. Hola Luis, muchas gracias por tu aporte, no sabía lo de las etiquetas! He pasado por el post y he etiquetado todo como dices, pero si clicas en los apartados del menú no aparecen las entradas... Puedes ver el blog y decirme qué he hecho mal??? http://notorious-shirts.blogspot.com.es Mil gracias!

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, y vi que ya publicaste cada post con sus respectivas etiquetas. Ahora el por que no aparecen al dar un clic en link que has puesto en el menu, es por que no estas colocando la direccion URL de tu etiqueta, Por ejemplo donde dice en tu Menu Camisetas, ahi debes insertar correctamente la direccion URL de tu etiqueta que seria esta direccion: http://notorious-shirts.blogspot.com.es/search/label/Camisetas
      Asi es como se insertan las direcciones URLs de las etiquetas en los menus. Ejemplo otra direccion URL de etiqueta son estas, abrelas y beras que funcionan y esas URLs ponlas en el Menu:
      http://notorious-shirts.blogspot.com.es/search/label/Ellos
      http://notorious-shirts.blogspot.com.es/search/label/Ellas
      http://notorious-shirts.blogspot.com.es/search/label/Street
      Y asi sucesivamente
      Espero haber sido lo mas explicativo posible..
      Saludos..

      Eliminar
  60. Genial Luis, muchísimas gracias! Me has sido de mucha ayuda! Un saludo!

    ResponderEliminar
  61. Hola Luis,
    Me ha resultado muy util tu post pero no soy capaz de hacer aparecer los submenus, He pegado el codigo pero como podras comprobar aparecen ocultos.
    Mi url es milesderelatos.blogspot.com , si me pudieras ayudar te lo agradeceria.

    ResponderEliminar
  62. Hola de nuevo Luis,
    Como podras comprobar lo que he hecho es ampliar la barra pero eso es una solucion provisional hasta que me respondas.mi correo es milesderelatos@gmail.com.
    Espero ansiosa tu respuesta ya que creo que puede quedar bastante bien en el blog.
    Un saludo

    ResponderEliminar
    Respuestas
    1. He respondido a tu comentario y te he enviado la respuesta a tu correo electronico
      Saludos.

      Eliminar
  63. AYUDA.

    Hola compañero Luis Chávez, me encantan tus tutoriales, y tus menús, pero no sé que estoy haciendo mal, no se logran mirar las subpestañas, esté es mi blog http://ladimensiondesconocidaseriecompleta.blogspot.mx/

    De verdad te agradecería bastante tu ayuda. Muchos saludos compañero y muy buen sitio, felicidades.

    ResponderEliminar
  64. Hola Luis:

    Quería hacer un menú desplegable para mi blog y he encontrado tu explicació de cómo hacerlo. Me ha gustado porque solamente hay que introducir el código en el widget de HTML/javascript.
    El problema es que no termino de entender qué cosas le tengo que modificar al código para adaptarlo a mi blog. ¿Donde pone #ayudadebloggernavbar debería poner la url de mi blog http://alesadedu.blogspot.com.es?
    De momento no sale nada en la parte donde debería aparecer el menú.
    Espero haberme explicado bien. Gracias de antemano.

    ResponderEliminar
  65. Hola Luis. he colocado la barra de menues a traves del gadget. Funciona bien, he podido editar bien los menues.
    La duda que tengo es como linkeo los posts que voy creando hacia esos menues, que link tengo que usar, es lo mismo hacer un post que una pagina para crear contenido?
    Saludos.
    te dejo el link del blog: www.autocorsa2000.com.ar

    ResponderEliminar
  66. Hola buenos dias, disculpe amigo, ya hice lo indicado por tu post y me aparece el menu blanco y se distingue muy poco las letras, solo cuando posiciono el cursor se ve bien...

    ResponderEliminar
  67. Hola ¿quería saber como hago para agregar a un submenu a mi plantilla osea me explico la plantilla ya tiene tiene los menus http://prueba2rc.blogspot.com/ pero a la hora de agregar todo esos codigo me agrega es un menu nuevo y me lo manda es para abajo en la parte que esta amariilo en vez de tener un solo menú salen dos . No se si me explico amigo
    De ante man gracias y disculpe la molestia
    este es mi correo romer.carrascotheroots@gmail.com

    ResponderEliminar
  68. Hola Luis.

    Te envié un mail, a primeros de este mes de julio, y te dejé un comentario en Google+ y no he recibido respuesta por tu parte.

    Sinceramente, he buscado tutoriales de otras personas pero no he encontrado explicaciones tan sencillas como las tuyas.

    Te agradecería respondieras mis dudas. Vuelvo a reenviarte el mail.

    Un saludo.

    ResponderEliminar
  69. Hola, todo me sale perfecto... salvo un detalle: los submenús salen como tapados por el fondo.
    ¿Qué me ha ocurrido?
    Gracias

    ResponderEliminar
  70. Lo que andaba buscando.Mil gracias,Luis!! :)

    ResponderEliminar
  71. Saludos, muchas gracias por toda la información que nos facilitas. Tengo un problema con el menú desplegable. Tengo un blog para pruebas, y allí se despliega el menú por sus temas; pero cuando copie el código html al blog definitivo, el menú no se despliega en sus temas. Gracias por la atención y la ayuda que me puedas dar.

    ResponderEliminar
  72. Hola Luis, ya te había escrito antes, corregí lo de los menús para que se desplegaran, pero ahora salen detrás de las entradas. Qué puedo hacer en este caso. Gracias.

    ResponderEliminar
  73. Saludos, muchas gracias por su información. El problema que tengo es que el menú desplegable sale detrás de las entradas del blog o detrás del presentación del mismo. la dirección es larevelaciondelmisterio.blogspot.com.co.

    ResponderEliminar
    Respuestas
    1. Hola Samuel, en algunas plantillas simples como las de Blogger, no suele mostrarse correctamente, pero para ello puede probar lo siguiente:

      Primero:

      Realice una copia de seguridad de su blog por si algo no le sale bien

      Segundo:

      Un clic en Tema

      Un clic en Editar HTML

      Busque el siguiente codigo

      <header>

      Ingrese todo el código de este tutorial justo arriba del código que encontró

      Realice los cambios y de un clic en Guardar tema.

      Cuénteme como le fue

      Saludos

      Eliminar
  74. Hola Luis. Estuve leyendo los comentarios y te preguntaron que ahcer cuando no se despliega el submenu de un submenu. Respondiste que mirarias de hacer una entrada, y como hace tiempo y no lo he encontrado me gustaria saber si lo hicistes o si puedes ayudarme a saber desplegar submenus dentro de submenus.

    Muchas gracias.

    ResponderEliminar
  75. HOLA BUENAS, tengo un problema que no se ve lo escrito. Cuando paso el puntero por encima se ve sino no

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta cual es la dirección URL del blog donde ingreso el tutorial

      Saludos

      Eliminar

  76. Buenos días, Luis: no sé si llego un poco tarde, ya que está entrada es bastante antigua. Acabo de abrir un nuevo blog e instalado el menú desplegable que ofreces, pero como a muchos otros compañeros, no consigo que las subpestañas se desplieguen. Tengo otro blog desde 2014: Las Almenas de Waylander, en el que tengo un menú instalado, pero los códigos no me sirven para este que acabo de crear. Muchas gracias de antemano y gracias por el aporte.

    ResponderEliminar
    Respuestas
    1. Hola Toni, gracias por escribir, con respecto a su pregunta, el menú funciona correctamente, talvez no esta ingresando el código correctamente o haya que mover un código desde su tema para que pueda funcionar.

      Eliminar
    2. Muchas gracias por contestar.
      El problema es el siguiente: en mi anterior blog tuve que editar HTML y sustituir algunos códigos. Esto fue en 2014. Ahora, al intentar instalar el mismo menú que tengo en mi otro blog: Las Almenas de Waylander, y del que hice un tutorial, me encuentro que esos códigos no existen en las nuevas versiones de Blogger.
      ]]>
      class='tabs'
      /* Tabs

      Eliminar
    3. Hola Toni, por favor remita la URL de su blog de Blogger

      Eliminar
    4. Smith Wesson Avuelapluma https://smithwessonavuelapluma.blogspot.com

      Eliminar
    5. Hola Toni, ingrese en su blog de Blogger, y el menu funciona correctamente no veo que tenga inconvenientes. Saludos

      Eliminar