Cómo agregar un menú para mi blog de Blogger con un solo widget

Aprende agregar un Menú Responsive en Blogger con un Solo Widget sin utilizar Javascript

¿Quieres que tu blog de Blogger destaque con una navegación moderna y funcional? Un menú bien diseñado no solo mejora la experiencia del usuario, sino que también optimiza tu sitio para SEO y aumenta el tiempo de permanencia de tus visitantes. En este artículo, te guiaremos paso a paso para agregar un menú responsive con submenús a tu blog de Blogger usando un solo widget. Este menú incluye un diseño elegante, animaciones suaves, y es completamente adaptable a dispositivos móviles con un menú hamburguesa. ¡Vamos a ello!

¿Por Qué Necesitas un Menú Responsive en tu Blog?

Un menú bien estructurado es clave para cualquier blog exitoso. Aquí tienes algunas razones para implementar este menú en tu sitio:

  • Mejora la experiencia del usuario: Facilita la navegación y ayuda a los visitantes a encontrar contenido rápidamente.
  • Diseño responsive: Se adapta perfectamente a desktops y móviles, ofreciendo una experiencia fluida.
  • Optimización SEO: Una navegación clara mejora la indexación y reduce la tasa de rebote.
  • Profesionalismo: Un menú moderno con submenús y animaciones da una imagen más profesional a tu blog.

Con el código que compartiremos, lograrás un menú horizontal en escritorio y un menú hamburguesa en móviles, con submenús funcionales y transiciones CSS suaves.

Características del Menú para Blogger

Antes de sumergirnos en el tutorial, conoce las características principales de este menú:

  • Diseño completamente responsive: Se ve increíble en cualquier dispositivo.
  • Menú horizontal en desktop: Elegante y fácil de navegar.
  • Menú hamburguesa en móviles: Compacto y funcional.
  • Submenús interactivos: En desktop, aparecen al hacer hover; en móvil, se expanden al tocar.
  • Transiciones suaves: Animaciones CSS que añaden un toque moderno.
  • Fácil implementación: Todo el código se inserta en un solo widget de Blogger.

Puede utilizar una herramienta llamada Editor HTML ONLINE, donde podrá realizar los cambios en vivo y luego copiar el código he insertarlo en un solo widget de Blogger, o una pagina web.

Editor HTML

A continuación puede ver su demostración en el siguiente blog de demos

Paso a Paso: Cómo Agregar el Menú a tu Blog de Blogger

Paso 1: Accede al Panel de Blogger

  1. Inicia sesión en tu cuenta de Blogger.
  2. Selecciona el blog donde deseas agregar el menú.
  3. Dirígete a la sección Diseño en el menú lateral.

Paso 2: Añade un Widget HTML/JavaScript

  1. En la sección Diseño, busca el área donde deseas colocar el menú (por lo general, en la parte superior, en la sección de "Encabezado" o "Barra lateral").
  2. Haz clic en Añadir un gadget.
  3. Selecciona el gadget HTML/JavaScript.

Paso 3: Copia y Pega el Código

Copia el siguiente código completo y pégalo en el campo de contenido del widget. Este código incluye tanto los estilos CSS como la estructura HTML del menú.

<style>
/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: #f9fafb;
    padding-top: 70px; /* Para compensar el menú fijo */
}
#modernNavBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background: linear-gradient(135deg, #2a2a72, #009ffd);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
#modernNav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#modernNav ul {
    list-style: none;
    display: flex;
    position: relative;
}
#modernNav li {
    position: relative;
}
#modernNav > ul > li > a {
    color: #fff;
    display: block;
    padding: 18px 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.3s ease, transform 0.2s ease;
}
#modernNav > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
/* Estilos de submenús */
#modernNav li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    flex-direction: column;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
#modernNav li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#modernNav li li a {
    color: #333;
    padding: 12px 20px;
    display: block;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
#modernNav li li a:hover {
    background: #f0f0f0;
    color: #009ffd;
}
/* Submenús anidados (verticales) */
#modernNav li ul ul {
    margin: -25px 0 0 161px;
    border-radius: 8px;
}
/* Menú hamburguesa para móviles */
#hamburger {
    display: none;
    font-size: 24px;
    color: #fff;
    padding: 18px 20px;
    cursor: pointer;
}
#mobileToggle {
    display: none;
}
/* Estilos para móviles */
@media (max-width: 768px) {
    #hamburger {
        display: block;
    }
    #modernNav > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    #mobileToggle:checked ~ ul {
        display: flex;
    }
    #modernNav > ul > li > a {
        color: #333;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }
    #modernNav li ul {
        position: static;
        background: #f9f9f9;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    #modernNav li:hover > ul {
        display: block;
    }
    #modernNav li li a {
        padding: 12px 30px;
    }
    #modernNav li ul ul {
        padding-left: 20px;
        margin-top: 0;
    }
}
/* Comportamiento de desplazamiento suave */
html {
    scroll-behavior: smooth;
}
</style>

<div id='modernNavBar'>
    <nav id='modernNav'>
        <input type='checkbox' id='mobileToggle'>
        <label for='mobileToggle' id='hamburger'>☰</label>
        <ul>
            <li><a href='/'>Inicio</a></li>
            <li><a href='#'>Quienes somos</a></li>
            <li>
                <a href='#'>Contactos</a>
                <ul>
                    <li><a href='#'>Facebook</a></li>
                    <li><a href='#'>Twitter</a></li>
                    <li><a href='#'>Tiktok</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>
    </nav>
</div>
        

Paso 4: Personaliza los Enlaces del Menú

El código incluye un menú de ejemplo con secciones como "Inicio", "Quienes somos", "Contactos", "Categorías", "Temas" y "Sitemap". Para adaptarlo a tu blog:

  1. Reemplaza los enlaces (href) con las URLs de tus páginas o categorías. Por ejemplo, cambia href='#' por href='https://tublog.blogspot.com/p/tu-pagina.html'.
  2. Modifica los nombres de las secciones para que reflejen el contenido de tu blog (por ejemplo, "Tutoriales", "Recetas", etc.).
  3. Añade o elimina submenús según tus necesidades. Simplemente copia y pega la estructura <li><a href='#'>Nombre</a></li> para agregar más elementos.

Paso 5: Guarda y Prueba

  1. Haz clic en Guardar en el widget.
  2. Guarda los cambios en la sección Diseño.
  3. Visita tu blog y verifica cómo se ve el menú en desktop y móvil. Asegúrate de que los enlaces funcionen y que los submenús se desplieguen correctamente.

Consejos para Optimizar tu Menú y Mejorar el SEO

Para que tu menú no solo sea funcional, sino que también atraiga tráfico orgánico, sigue estas recomendaciones:

  • Usa palabras clave en los nombres de los enlaces: Por ejemplo, si tu blog es sobre recetas, incluye términos como "Recetas fáciles" o "Postres rápidos" en el menú.
  • Mantén una estructura clara: Evita tener demasiados elementos en el menú principal para no abrumar a los visitantes.
  • Incluye un sitemap: Como en el ejemplo, un enlace a un sitemap ayuda a los motores de búsqueda a indexar tu contenido.
  • Prueba la velocidad de carga: Este menú es ligero, pero asegúrate de que tu blog no tenga otros elementos que ralenticen la carga.

Solución de Problemas Comunes

El menú no aparece en la parte superior

  • Asegúrate de que el widget esté colocado en una sección superior en la sección Diseño.
  • Verifica que el código no tenga errores de sintaxis.

Los submenús no se despliegan en móvil

  • Confirma que el código incluye el <input type='checkbox' id='mobileToggle'> y el <label for='mobileToggle' id='hamburger'>☰</label>.

El diseño no es responsive

  • Revisa que los estilos @media (max-width: 768px) estén incluidos en el código CSS.

Si encuentras otros problemas, déjanos un comentario y te ayudaremos a resolverlos.

Conclusión: Un Menú que Transformará tu Blog

Agregar un menú responsive con submenús a tu blog de Blogger es más fácil de lo que parece. Con un solo widget y el código proporcionado, puedes transformar la navegación de tu sitio, mejorar la experiencia del usuario y potenciar tu SEO. Este diseño moderno, con transiciones suaves y un menú hamburguesa para móviles, hará que tu blog luzca profesional y sea fácil de usar en cualquier dispositivo.

¿Listo para llevar tu blog al siguiente nivel? ¡Implementa este menú hoy mismo y comparte tus resultados en los comentarios! Si necesitas personalizar aún más el diseño o tienes dudas, estamos aquí para ayudarte.

¡Comparte tu experiencia!

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