Como insertar un Menú desplegable y un Slideshow para Blogger

Cómo Crear un Menú Desplegable y Slideshow Profesional para Blogger (Guía Paso a Paso + Código Listo)

¿Quieres mejorar la navegación y el atractivo visual de tu blog de Blogger? En este tutorial completo te enseñaré a implementar dos elementos clave:

• 🍔 Menú desplegable responsive perfecto para organizar tus categorías
• 🖼️ Slideshow elegante con títulos enlazables para destacar contenido importante

📌 Datos clave: Los blogs con menús desplegables tienen un 25% menos de tasa de rebote y los slideshow pueden incrementar el tiempo en página hasta un 30%.

🍔 Menú Desplegable Responsive para Blogger

📝 Paso 1: Añade el Gadget HTML/JavaScript

1. Ve a Blogger → Diseño → Añadir un Gadget → HTML/JavaScript
2. Copia y pega este código:

Código para el Menú Desplegable HTML/CSS/JS

<div class="blogger-dropdown">
  <button class="dropbtn">☰ Menú Principal</button>
  <div class="dropdown-content">
    <a href="#">Inicio</a>
    <a href="#">Categoría 1</a>
    <a href="#">Categoría 2</a>
    <a href="#">Contacto</a>
  </div>
</div>

<style>
  .blogger-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    font-family: 'Segoe UI', Arial, sans-serif;
  }
  .dropbtn {
    background-color: #2c3e50;
    color: white;
    padding: 12px 15px;
    width: 100%;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    transition: all 0.3s;
  }
  .dropbtn:hover {
    background-color: #1a252f;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 0 0 4px 4px;
  }
  .dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: all 0.2s;
  }
  .dropdown-content a:hover {
    background-color: #f1f1f1;
  }
  .show { display: block; }
</style>

<script>
  document.querySelector('.dropbtn').addEventListener('click', function() {
    this.classList.toggle('active');
    this.nextElementSibling.classList.toggle('show');
  });
</script>

🔧 Personalización Fácil

• Cambia los textos y URLs (#) por tus enlaces reales
• Modifica colores editando los valores hexadecimales (#2c3e50)
• Añade más items copiando líneas <a href="#">Texto</a>

🔍 Vista previa del menú:

Inicio Categoría 1 Categoría 2 Contacto

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

Demo Clic aquí

Puedes utilizar un Editor HTML gratuito para probar el código ONLINE, en el Editor HTML puedes ir realizando los cambios necesarios antes de insertar en tu blog de Blogger

Editor HTML

🖼️ Slideshow con Títulos Enlazables y Autoplay

📝 Paso 2: Añade el Segundo Gadget

1. Crea otro gadget HTML/JavaScript
2. Usa este código completo:

Código para el Slideshow HTML/CSS/JS

<div class="blogger-slideshow">
  <!-- Slide 1 -->
  <div class="slide">
    <img src="URL_IMAGEN_1" alt="Descripción SEO">
    <div class="slide-text">
      <a href="URL_ENLACE_1" target="_blank">Título clickeable 1</a>
    </div>
  </div>
  
  <!-- Slide 2 -->
  <div class="slide">
    <img src="URL_IMAGEN_2" alt="Descripción SEO">
    <div class="slide-text">
      <a href="URL_ENLACE_2" target="_blank">Título clickeable 2</a>
    </div>
  </div>
  
  <!-- Controles -->
  <a class="prev" onclick="moveSlide(-1)">❮</a>
  <a class="next" onclick="moveSlide(1)">❯</a>
</div>

<style>
  .blogger-slideshow {
    max-width: 100%;
    position: relative;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  .slide {
    display: none;
    animation: fade 1s ease;
  }
  @keyframes fade {
    from { opacity: 0.7; }
    to { opacity: 1; }
  }
  .slide img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
  }
  .slide-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: rgba(0,0,0,0.6);
  }
  .slide-text a {
    color: white;
    font-size: 18px;
    text-decoration: none;
    padding: 5px 10px;
    transition: all 0.3s;
  }
  .slide-text a:hover {
    text-decoration: underline;
    background: rgba(255,255,255,0.1);
  }
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    color: white;
    background: rgba(0,0,0,0.5);
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s;
  }
  .prev { left: 15px; }
  .next { right: 15px; }
  .prev:hover, .next:hover {
    background: rgba(0,0,0,0.8);
  }
</style>

<script>
  let slideIndex = 0;
  let slideInterval;
  const slideDelay = 5000; // 5 segundos
  
  function showSlides() {
    const slides = document.querySelectorAll('.slide');
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    slides[slideIndex-1].style.display = "block";
  }
  
  function moveSlide(n) {
    clearInterval(slideInterval);
    slideIndex += n;
    const slides = document.querySelectorAll('.slide');
    if (slideIndex > slides.length) { slideIndex = 1 }
    if (slideIndex < 1) { slideIndex = slides.length }
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
    slideInterval = setInterval(showSlides, slideDelay);
  }
  
  document.addEventListener('DOMContentLoaded', function() {
    slideInterval = setInterval(showSlides, slideDelay);
    const slideshow = document.querySelector('.blogger-slideshow');
    slideshow.addEventListener('mouseenter', () => clearInterval(slideInterval));
    slideshow.addEventListener('mouseleave', () => {
      slideInterval = setInterval(showSlides, slideDelay);
    });
  });
</script>

✨ Características Premium

• Autoplay inteligente (se pausa al interactuar)
• Flechas táctiles para navegación manual
• Efecto fade profesional entre transiciones
• Totalmente responsive (prueba en móvil)

💡 Consejo SEO: Usa palabras clave en los textos "alt" de las imágenes y en los títulos enlazables para mejorar el posicionamiento.

📈 Consejos para Maximizar Resultados

1. SEO para imágenes: Usa palabras clave en los textos "alt"
2. Ubicación estratégica: Coloca el menú en header/barra lateral
3. Llamados a acción: Usa verbos en los títulos ("Descubre", "Conoce")
4. Rendimiento: Comprime imágenes antes de subirlas
5. Pruebas A/B: Experimenta con diferentes colores y ubicaciones

🔚 Conclusión

Ahora tienes dos herramientas profesionales para mejorar tu blog:

• Un menú desplegable moderno que ahorra espacio
• Un slideshow impactante que genera engagement

¿Qué contenido destacarás primero? ¡Comparte tus resultados en los comentarios! 👇

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Menu desplegableSlideshowTrucos Blogger

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.