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.
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
- Inicia sesión en tu cuenta de Blogger.
- Selecciona el blog donde deseas agregar el menú.
- Dirígete a la sección Diseño en el menú lateral.
Paso 2: Añade un Widget HTML/JavaScript
- 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").
- Haz clic en Añadir un gadget.
- 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:
- Reemplaza los enlaces (
href
) con las URLs de tus páginas o categorías. Por ejemplo, cambiahref='#'
porhref='https://tublog.blogspot.com/p/tu-pagina.html'
. - Modifica los nombres de las secciones para que reflejen el contenido de tu blog (por ejemplo, "Tutoriales", "Recetas", etc.).
- 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
- Haz clic en Guardar en el widget.
- Guarda los cambios en la sección Diseño.
- 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!
Muy bueno Hermano me dunfiono de maravilla lo q quiero saber es como le inserto un link por ejemplo a home ?
ResponderEliminarHola Peliculas Online:
ResponderEliminarPara 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..
eres el mejor hermano te lo agradesco muchisimo este es mi blogger por si lo quieres ver http://elblogdelaspelicula.blogspot.com
ResponderEliminarHermano 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
ResponderEliminarOk acepta mi invitacion de facebook ok
ResponderEliminarmi invitacion es luchochavez2003@yahoo.com
en este momento estoy conectado para ayudarte en lo que quieras.
Saludos..
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.
ResponderEliminarhola 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.
ResponderEliminarSaludos..
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???
ResponderEliminarHola 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.
ResponderEliminarSaludos...
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.
ResponderEliminarHola Aquario, esa es la idea con eso no te copiaran tus fotos.
ResponderEliminarSaludos..
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola 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.
ResponderEliminarSaludos.
hermano luis un saludo de caracas venezuela
ResponderEliminarpodrias 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
y me refiero al post sobre el efecto de jQuery! el paso 7
ResponderEliminarHola te dejo la direccion de mi correo para explicarte claramente, ayudadeblogger@gmail.com
ResponderEliminarenviame un mensaje directo y te describire los pasos a seguir.
Saludos.
HOla, Luis! Inserto el código pero el submenu se me queda cortado y es como si el fondo estuviera encima de él.
ResponderEliminarEl blog es 19descenso.blogspot.com
Gracias!
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.
ResponderEliminarSi no sabes como acontinuacion te dejo la direccion de mi email para ayudarte por interno: ayudadeblogger@gmail.com
Saludos.
como hago para que los menu me lleven a otra pagina
ResponderEliminarHola 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.
ResponderEliminarSaludos.
Hola! acabo de insertar el códig y tengo un problema, no se ven los desplegabales :(
ResponderEliminarQue hago??
Gracias
Este es mi blog
http://www.passion4nails.es/
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.
ResponderEliminarSi 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.
Amigo Luis, como hago para colocar otro sub menu dentro de un sub menu ?
EliminarHola, 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.
EliminarBuenos días Luis y muchas gracias por tu ayuda.
ResponderEliminarHe 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
Hola de nuevo, he podido mirar un poco más, y las 2 primeras subpestañas van, y la tercera no.
ResponderEliminarQue puedo hacer?
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.
ResponderEliminarSaludos.
Buenas tardes Luis, Gracias. Siento no haber sido más explicita. ya me funciona. Gracias.
ResponderEliminarHola, de nada saludos.
ResponderEliminarHola 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
ResponderEliminarya lo arreglé, observando los comandos vi que se repetían. Gracias de nuevo, estoy aprendiendo mucho, espero les sirva a mis alumnos. Saludos cordiales
ResponderEliminarHola Walter, es bueno saber que lo hayas arreglado tu mismo te felicito, vi tu blog excelente trabajo.
ResponderEliminarSaludos.
hola luis me gustaria saber como hacer para q cuando pinche a un enlace se abra en una pestaña o ventana nueva,gracias
ResponderEliminarHola, enviame un mensaje directo a: ayudadeblogger@gmail.com
ResponderEliminarIndicando lo que necesitas, y te enviare el codigo de insercion.
Saludos.
ya te lo envie luis,gracias por tu ayuda
ResponderEliminarmil gracias eres un maestro
ResponderEliminarHola, de nada. saludos.
ResponderEliminarHola 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.
ResponderEliminarhola claro que se puede, necesito que me envies la direccion de tu blog para indicarte como hacerlo.
ResponderEliminarSaludos.
http://fisica6to.blogspot.com es la direccion, muchísimas gracias y perdón por tantas molestias
ResponderEliminarmuchas gracias por el post me ha ayudado mucho! así ha quedado mi blog http://enelpaisdelasbodas.blogspot.com.es
ResponderEliminarHola he visto tu blog te quedo estupendo te felicito, has hecho un buen trabajo
EliminarSaludos.
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.
ResponderEliminarMuchas gracias de ante mano
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.
EliminarPor 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.
Muchísimas gracias, ya me funciona perfectamente.
ResponderEliminarhttp://descargartodopormega.blogspot.com.ar/
ResponderEliminaresta super gracias eso era lo ke necesitaba
ResponderEliminarHola, 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?
ResponderEliminarGracias.
El blog en el que estoy utilizando el código es http://salasorpresas.blogspot.com.es/
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,,
EliminarTe puedo ayudar, tienes que dejarme tu insidencia directamente en esta direccion: ayudadeblogger@gmail.com
Saludos.
como cambio el color del menu despegable ? q no salga el color azul , quiero otro color
ResponderEliminarHola, 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.
EliminarSaludos.
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.
ResponderEliminarEste es mi blog: newupdatesblog.blogspot.com
Espero que me puedas ayudar
Gracias
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
EliminarIndica tu insidencia y te ayudare por interno..
Saludos.
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.
ResponderEliminarESTE ES MI BLOG:http://altosinuurbano.blogspot.com/
LE AGRADEZCO ME COLABORE...
Buenas tardes Luis.
ResponderEliminarHe 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.
Hola, ya te envie la respuesta a tu correo electronico
EliminarSaludos.
Gracias por la excelente ayuda y la excelente página. Tuve algunos pequeños problemas pero serán solucionados...
ResponderEliminarHola, 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.
ResponderEliminarMi blog es bach-musical.blogspot.com.es
Rogaría me contestase. Gracias
Hola, busca este simbolo # que se encuentra despues de href= e inser la url de la pagina que quieras mostrar.
EliminarSaludos.
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.
Eliminardonde los meto y como???
No se si me he explicado
Hola enviame la direccion te tu blog para poder verlo y decirque que es lo que debes hacer.
EliminarSaludos.
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:
ResponderEliminar¿Que linea de código puedo aumentar a mi CSS para que sea desplegable?
¡Hola Luis!
ResponderEliminarTu 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!
El menu funciona perfectamente, voy a actualizar este post y explicarlo mejor.
EliminarSaludos.
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
ResponderEliminarHola he visto tu blog, y no es el menu que esta en este post.
EliminarSaludos.
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?
ResponderEliminarAqui mi blog: http://tuamistosovecinorafatos.blogspot.mx
De antemano gracias y !saludos!
Hola, tocaria cambiar una parte del codigo, espero tener mas tiempo y asi poder publicar un tema como lo que tu dices.
EliminarSaludos.
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?
ResponderEliminarmuchas gracias
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.
EliminarSaludos.
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
EliminarHola 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
ResponderEliminarHola, no entiendo a su pregunta..
EliminarSaludos.
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
EliminarHola, Muchisimas gracias por explicar tan claro algo que para los que no sabemos de esto es tan complicado.
ResponderEliminarMe 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
Hola, solo necesitas cambiar en los nombres que estan marcados de diferentes colores por los nombres que tu quieras.
ResponderEliminarSaludos.
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/.
ResponderEliminar¡Muchas gracias!
Hola he visto tu blog y si veo que funciona el menu perfectamente.
EliminarSaludos
Luis:
EliminarTienes 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.
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..
EliminarSaludos.
Hola amigo, he utilizado tu modelo de menu, pero me aparece en blanco, y se quita al pasar el mouse momentaneamente...
Eliminarhttp://bellaspalabrasdealiento.blogspot.mx
espero puedas ayudarme gracias
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
ResponderEliminarHola he visto tu blog y el menu funciona perfectmanete, y los antiguos codigos no lo dificultaran, no te preocupes...
EliminarSalduso.
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!!
ResponderEliminarSe 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
EliminarSaludos.
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!
ResponderEliminarHola 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
EliminarAsi 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..
Genial Luis, muchísimas gracias! Me has sido de mucha ayuda! Un saludo!
ResponderEliminarHola Luis,
ResponderEliminarMe 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.
Hola de nuevo Luis,
ResponderEliminarComo 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
He respondido a tu comentario y te he enviado la respuesta a tu correo electronico
EliminarSaludos.
AYUDA.
ResponderEliminarHola 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.
Hola Luis:
ResponderEliminarQuerí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.
Hola Luis. he colocado la barra de menues a traves del gadget. Funciona bien, he podido editar bien los menues.
ResponderEliminarLa 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
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...
ResponderEliminarHola ¿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
ResponderEliminarDe ante man gracias y disculpe la molestia
este es mi correo romer.carrascotheroots@gmail.com
Hola Luis.
ResponderEliminarTe 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.
Hola, todo me sale perfecto... salvo un detalle: los submenús salen como tapados por el fondo.
ResponderEliminar¿Qué me ha ocurrido?
Gracias
Muchas gracias Luis
ResponderEliminarLo que andaba buscando.Mil gracias,Luis!! :)
ResponderEliminarSaludos, 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.
ResponderEliminarHola 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.
ResponderEliminarSaludos, 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.
ResponderEliminarHola Samuel, en algunas plantillas simples como las de Blogger, no suele mostrarse correctamente, pero para ello puede probar lo siguiente:
EliminarPrimero:
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
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.
ResponderEliminarMuchas gracias.
muchas gracias
ResponderEliminarHOLA BUENAS, tengo un problema que no se ve lo escrito. Cuando paso el puntero por encima se ve sino no
ResponderEliminarHola, con respecto a su pregunta cual es la dirección URL del blog donde ingreso el tutorial
EliminarSaludos
ResponderEliminarBuenos 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.
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.
EliminarMuchas gracias por contestar.
EliminarEl 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
Hola Toni, por favor remita la URL de su blog de Blogger
EliminarSmith Wesson Avuelapluma https://smithwessonavuelapluma.blogspot.com
EliminarHola Toni, ingrese en su blog de Blogger, y el menu funciona correctamente no veo que tenga inconvenientes. Saludos
Eliminar