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:
6 Comentarios
Excelente información la verdad, mil gracias, genial video el de YouTube
ResponderBorrarHola! Excelente explicación e información. Muchas gracias!
ResponderBorrarTengo un solo problema. Al insertar la url de las imágenes en el cod HTML que necesito para la visualización del Slider, no muestra las imágenes. Como si no cargaran. A que se puede deber?
Gracias!
El link de la imagen es un link de google ? Si es asi a veces falla con el link de Google lo mejor es descargar la imagen subir la imagen a una entrada de blogger y copiar el link y luego pegarlo en el codigo si el problema aun persiste debe haber una interferencia con la plantilla de la pagina y los códigos asegúrate de copiar los códigos en el lugar correcto y si aun asi hay ese problema te recomiendo cambiar de plantilla de blogger
BorrarMe sucede lo mismo, los codigos estan bien instalados, pero la imagen no se ve. Aun asi subi el codigo a una pagina sola y a una entrada y de igual manera no se ve.
BorrarNo se que esta pasando, hago tal cual el video y el blog pero no funciona el slider, se agrega las imagenes de manera vertical, una detras de otra. Este es mi Blog
ResponderBorrartendria q ver la plantilla de tu block para tratar de ver el problema y hacer compatible el codigo, si aun necesitas escribeme al discord
ResponderBorrar