Crear un Menú de colores para Blogger

Menú Desplegable Responsive de Colores para Blogger: Tutorial Completo

¡Hola, bloggers! ¿Quieres darle un toque moderno y funcional a tu blog en Blogger con un menú desplegable responsive que sea atractivo y fácil de usar? En este tutorial completo, te guiaré paso a paso para crear un menú hamburguesa colorido sin necesidad de JavaScript, solo con CSS. Este menú es 100% responsivo, con submenús desplegables, transiciones suaves y colores personalizables. ¡Perfecto para destacar en móviles y escritorios!

¿Por Qué Elegir Este Menú para Tu Blog?

Antes de sumergirnos en el código, hablemos de las características principales que hacen este menú ideal para tu blog en Blogger:

• Solo CSS: Ligero y sin scripts, mejora la velocidad de carga.
• Responsivo: Se convierte en un menú hamburguesa en móviles.
• Hover en Desktop: Submenús visibles al pasar el cursor.
• Acordeón en Móvil: Submenús que se expanden con un clic.
• Colores Únicos: Cada pestaña tiene un color personalizable mediante variables CSS.
• Diseño Moderno: Incluye íconos de Font Awesome y transiciones suaves.

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 Implementar el Menú en Blogger

1. Accede al Panel de Blogger

Inicia sesión en tu cuenta de Blogger y sigue estos pasos:

1. Dirígete al apartado "Diseño" en el panel de control.
2. Haz clic en "Añadir un gadget" en la sección donde deseas colocar el menú (normalmente en la parte superior del blog).
3. Selecciona el gadget "HTML/JavaScript".

2. Copia y Pega el Código

Dentro del gadget, pega el siguiente código completo. Este incluye el HTML para la estructura del menú, el enlace a Font Awesome para los íconos y los estilos CSS para el diseño.

<!-- HTML DEL MENÚ -->
<nav>
  <label for="toggle" class="menu-toggle"><i class="fa fa-bars"></i> Menú</label>
  <input type="checkbox" id="toggle" hidden>

  <ul>
    <li class="home">
      <a href="#"><i class="fa fa-home"></i> Inicio</a>
    </li>

    <li class="about">
      <input type="checkbox" id="about-menu" hidden>
      <label for="about-menu"><i class="fa fa-user"></i> Sobre <i class="fa fa-chevron-down"></i></label>
      <ul>
        <li><a href="#">Equipo</a></li>
        <li><a href="#">Historia</a></li>
      </ul>
    </li>

    <li class="services">
      <input type="checkbox" id="services-menu" hidden>
      <label for="services-menu"><i class="fa fa-cogs"></i> Servicios <i class="fa fa-chevron-down"></i></label>
      <ul>
        <li><a href="#">Diseño</a></li>
        <li><a href="#">Desarrollo</a></li>
        <li><a href="#">Consultoría</a></li>
      </ul>
    </li>

    <li class="blog">
      <a href="#"><i class="fa fa-pen-nib"></i> Blog</a>
    </li>

    <li class="pricing">
      <input type="checkbox" id="pricing-menu" hidden>
      <label for="pricing-menu"><i class="fa fa-tags"></i> Precios <i class="fa fa-chevron-down"></i></label>
      <ul>
        <li><a href="#">Planes</a></li>
        <li><a href="#">Ofertas</a></li>
      </ul>
    </li>
    
    <li class="contact">
      <a href="#"><i class="fa fa-envelope"></i> Contacto</a>
    </li>
  </ul>
</nav>

<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

<!-- VARIABLES Y ESTILOS -->
<style>
  :root {
    --color-home: #4CAF50;
    --color-about: #2196F3;
    --color-services: #FF9800;
    --color-contact: #E91E63;
    --color-blog: #9C27B0;
    --color-gallery: #3F51B5;
    --color-portfolio: #009688;
    --color-pricing: #795548;
    --color-support: #607D8B;
    --color-news: #F44336;
    --color-login: #673AB7;
    --bg-submenu: #333;
    --text-color: #fff;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Segoe UI', sans-serif;
    padding-top: 70px;
  }

  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    z-index: 1000;
  }

  nav .menu-toggle {
    display: none;
    font-size: 24px;
    padding: 15px;
    color: var(--text-color);
    cursor: pointer;
    background: #111;
  }

  nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }

  nav ul li {
    position: relative;
    flex: 1;
    text-align: center;
  }

  nav ul li > a,
  nav ul li > label {
    display: block;
    padding: 15px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  nav ul li.home > a,
  nav ul li.home > label { background: var(--color-home); }

  nav ul li.about > a,
  nav ul li.about > label { background: var(--color-about); }

  nav ul li.services > a,
  nav ul li.services > label { background: var(--color-services); }

  nav ul li.contact > a,
  nav ul li.contact > label { background: var(--color-contact); }
  
  nav ul li.blog > a,
  nav ul li.blog > label { background: var(--color-blog); }

  nav ul li.pricing > a,
  nav ul li.pricing > label { background: var(--color-pricing); }  

  nav ul li:hover > a,
  nav ul li:hover > label {
    filter: brightness(1.1);
  }

  nav ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-submenu);
    display: none;
    flex-direction: column;
    width: 100%;
    z-index: 998;
  }

  nav ul li:hover ul {
    display: flex;
  }

  nav ul li ul li a {
    padding: 12px;
    text-align: left;
    color: var(--text-color);
    border-top: 1px solid #444;
    background: #222;
    text-decoration: none;
  }

  nav ul li ul li a:hover {
    background: #444;
  }

  @media (max-width: 768px) {
    nav .menu-toggle {
      display: block;
    }

    nav input#toggle:checked ~ ul {
      display: flex;
      flex-direction: column;
    }

    nav ul {
      display: none;
      flex-direction: column;
      width: 100%;
    }

    nav ul li {
      flex: unset;
      width: 100%;
    }

    nav ul li ul {
      position: static;
      display: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    nav ul li input:checked ~ ul {
      display: flex;
      max-height: 500px;
    }

    nav ul li input {
      display: none;
    }

    nav ul li label {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav ul li label .fa {
      margin-left: 8px;
    }
  }
</style>
    

3. Personaliza los Enlaces

Reemplaza los enlaces (href="#") con las URLs reales de las páginas de tu blog (por ejemplo, href="/p/contacto.html" para la página de contacto). También puedes modificar los nombres de las pestañas y submenús según el contenido de tu blog.

4. Personaliza los Colores

En la sección :root del CSS, ajusta los colores de las variables (--color-home, --color-about, etc.) para que coincidan con la paleta de tu blog. Por ejemplo, cambia --color-home: #4CAF50; a un color que prefieras, como #FF6347.

5. Guarda y Prueba

Guarda el gadget y visualiza tu blog. Prueba el menú en diferentes dispositivos para asegurarte de que sea completamente responsivo y funcione correctamente.

Cómo Funciona el Menú

En Escritorio

• Hover: Al pasar el cursor sobre una pestaña con submenú (como "Sobre" o "Servicios"), los submenús se despliegan automáticamente.
• Colores Únicos: Cada pestaña tiene un color distintivo definido en :root, con un efecto de brillo al hacer hover.
• Diseño Moderno: Los íconos de Font Awesome añaden un toque profesional, y las transiciones suaves mejoran la experiencia del usuario.

En Móviles

• Menú Hamburguesa: En pantallas pequeñas, aparece un ícono de hamburguesa (<i class="fa fa-bars"></i>) que al hacer clic muestra el menú.
• Acordeón: Los submenús se expanden al hacer clic en las pestañas, con una animación suave gracias a la propiedad max-height.

Palabras clave de cola larga: cómo crear un menú hamburguesa para Blogger, menú desplegable sin JavaScript, personalizar menú responsive en Blogger.

Consejos para Personalizar tu Menú

Cambia los Íconos

Puedes explorar más íconos en Font Awesome y reemplazar los actuales (como fa-home o fa-cogs) por otros que se ajusten a tu estilo.

Ajusta las Animaciones

Modifica la propiedad transition en el CSS para hacer las animaciones más rápidas o lentas. Por ejemplo, cambia transition: max-height 0.4s ease; a 0.6s para una transición más suave.

Adapta el Diseño

Si quieres un menú más ancho o con diferente tipografía, ajusta las propiedades de padding, font-family o font-size en el CSS.

Por Qué Este Menú Es Perfecto para Blogger

Este menú no solo es fácil de implementar, sino que también es ligero al no depender de JavaScript, lo que mejora la velocidad de carga de tu blog. Además, su diseño responsivo garantiza que se vea genial en cualquier dispositivo, y los colores personalizables te permiten alinearlo con la identidad visual de tu marca.

Palabras clave de cola larga: menú CSS para Blogger 2025, tutorial menú hamburguesa responsive, crear menú desplegable moderno para blog.

Conclusión

¡Y listo! Con este menú desplegable responsive de colores, tu blog en Blogger no solo será más funcional, sino también más atractivo y profesional. Sigue los pasos, personaliza los colores y enlaces, y tendrás un menú que impresiona tanto en móviles como en escritorio. ¿Te animas a probarlo? Si tienes dudas o quieres compartir tu resultado, déjame un comentario. ¡A bloguear con estilo!

¡Comparte tu experiencia!

© Ayudadeblogger.com Tu Blog. Tutorial creado con ❤️ para la comunidad de Blogger.

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:

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.