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

Demo Clic aquí

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

TAGS: Menu desplegable

Share: