Slider en Blogger

Cómo agregar un Slider en Blogger

Un Slider, también conocido como carrusel de imágenes, es una herramienta visual muy útil para destacar publicaciones, productos o promociones en tu página web. En este tutorial aprenderás a instalarlo en Blogger paso a paso.

Importancia de un Slider en tu página web

✔ Captura la atención: Es lo primero que verán tus visitantes, generando un impacto inmediato.

✔ Destaca contenido clave: Puedes mostrar tus artículos más importantes o productos destacados.

✔ Mejora la navegación: Permite mostrar varias imágenes o mensajes en un espacio reducido.

✔ Aumenta la interacción: Con botones de llamado a la acción, mejora clics y conversiones.

Paso 1: Insertar el archivo CSS

Copia la siguiente línea y pégala justo debajo de la etiqueta <head> en tu plantilla de Blogger: 

<link href='https://dl.dropbox.com/s/w9a9q7n0pdpkq9s/slick.css' rel='stylesheet' type='text/css'/>

Paso 2: Estilos personalizados del Slider

Ahora busca ]]></b:skin> en tu plantilla y, justo arriba, pega estos estilos: 

.slick-dots{display:flex;justify-content:center;margin:0;padding:5px 0!important;list-style-type:none}
.slick-dots li{margin:0 .25rem}
.slick-dots button{display:block;width:12px;height:12px;padding:0;border:1px solid #afafaf;border-radius:100%;text-indent:-9999px;background:#9e9e9e;background:linear-gradient(to bottom,#9e9e9e 0%,#ccc 100%)}
.slick-dots li.slick-active button{background:#4791ff;background:linear-gradient(to bottom,#4791ff 0%,#0030ff 100%);box-shadow:0 0 1px #206fff}
.item-slider{width:100%}
.item-slider img{margin:0 auto;display:flex;justify-content:center;padding:5px 0}

Paso 3: Insertar el script JS

Ahora ve hasta el final de tu plantilla y pega este código justo arriba de la etiqueta </body>: 

<script src='https://dl.dropbox.com/s/t4uv8e6fos02rvt/slick.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$('.slider-img').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  autoplay: true,
  arrows: false,
});
//]]>
</script>

Paso 4: Configuración básica

  • dots: true → Muestra los puntos debajo del slider.
  • infinite: true → Hace que el slider se repita sin fin.
  • speed: 500 → Velocidad del cambio (en milisegundos).
  • fade: true → Aplica un efecto de desvanecimiento.
  • autoplay: true → Cambia las imágenes automáticamente.
  • arrows: false → Oculta flechas laterales.

Paso 5: Agregar el HTML del Slider

Finalmente, pega este bloque en una entrada, página o gadget de HTML en Blogger: 

<div class="slider-img">
  <div class="item-slider">
    <img src="URL_IMAGEN_1" alt="Texto descriptivo"/>
  </div>
  <div class="item-slider">
    <img src="URL_IMAGEN_2" alt="Texto descriptivo"/>
  </div>
  <div class="item-slider">
    <img src="URL_IMAGEN_3" alt="Texto descriptivo"/>
  </div>
</div>

Si quieres agregar más imágenes, solo añade más bloques <div class="item-slider">...</div> dentro del contenedor.

Conclusión

Agregar un Slider a tu página en Blogger mejora la experiencia visual, ayuda a destacar contenido clave y capta la atención de tus visitantes desde el primer momento. Experimenta con diferentes imágenes y estilos para encontrar el diseño que más se ajuste a tu blog.

📹 Ejemplo visual: Cómo instalar el Slider

Si prefieres ver un ejemplo práctico, aquí tienes un video explicativo donde se muestra cómo instalar y configurar un Slider en Blogger: