Agrega un Slider a tu página web de Blogger y cautiva a tus visitantes

Un Slider, también conocido como carrusel de imágenes, es una herramienta poderosa para mejorar la apariencia y la funcionalidad de tu página web en Blogger. Si deseas destacar visualmente tu contenido y mantener a tus visitantes interesados, agregar un Slider es una excelente opción. En este artículo, aprenderás cómo incorporar un Slider en tu sitio web de Blogger y el impacto positivo que tendrá en la experiencia de tus usuarios.

Importancia de un Slider en tu página web:

Captura la atención: Un Slider atractivo en la parte superior de tu página web es lo primero que verán tus visitantes. Al presentar una serie de imágenes o mensajes en movimiento, captarás su atención de inmediato y los motivarás a explorar más contenido.

Destaca contenido destacado: Utiliza el Slider para resaltar tus publicaciones más importantes, ofertas especiales o productos destacados. Es una forma efectiva de dirigir la atención de tus visitantes hacia lo que consideras más relevante.

Mejora la navegación: El Slider permite mostrar múltiples mensajes o imágenes en un espacio limitado, lo que facilita la navegación y la visualización de información variada sin recargar la página.

Aumenta la interacción: Algunos Sliders permiten incluir botones de llamado a la acción, lo que puede aumentar la interacción y las conversiones en tu sitio web.

Cómo agregar un Slider en Blogger:

Aquí tienes los pasos generales para agregar un Slider en tu página web de Blogger:

Vamos a proceder a aplicar los estilos del slider para Blogger, así que copiaremos la siguiente línea abajo de la etiqueta <head>

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

Ahora Buscas esta otra línea: ]]></b:skin> Y arriba de esta, agregas estos estilos:

CSS .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:-moz-linear-gradient(top,#9e9e9e 0%,#ccc 100%);background:-webkit-linear-gradient(top,#9e9e9e 0%,#ccc 100%);background:linear-gradient(to bottom,#9e9e9e 0%,#ccc 100%)}
.slick-dots li.slick-active button{background:#4791ff;background:-moz-linear-gradient(top,#4791ff 0%,#0030ff 100%);background:-webkit-linear-gradient(top,#4791ff 0%,#0030ff 100%);background:linear-gradient(to bottom,#4791ff 0%,#0030ff 100%);box-shadow:0 0 1px #206fff}
.item-slider{width:100%}
.item-slider img,.item-slider iframe,.item-slider p,.item-slider h1,.item-slider h2,.item-slider h3,.item-slider h4,.item-slider h5,.item-slider h6{margin:0 auto;display:flex;justify-content:center;padding:5px 0}

JS/Javascript del Slider para Blogger

Con el siguiente código va a funcionar el slider para Blogger, Cópielo y pégalo arriba de </body>

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

Configuración del Slider

Para que funcione, debes aplicar la misma clase tanto el JS como en el HTML. En este caso la clase se llama slider-img (Puedes cambiarlo, pero recuerda de agregarlo en el JS Y HTML)

También puedes configurar en el JS lo siguiente:

dots: true Son los puntitos o indicares, se visualizan debajo de la imagen/vídeo
infinite: true Sirve para que el slider se desplace siempre
speed: 500 Es la velocidad, puedes hacerlo más lento o más rápido
fade: true Aplica un efecto desvanecedor cuando cambia la imagen
autoplay: true Las imágenes/vídeos se mueven automáticamente
arrows: false Oculta unas flechas, déjalas ocultas porque se ven feas.

Ya con esto la instalación esta lista, solo queda guardar los cambios.

Mostrar un Slider en Blogger con HTML

Solo queda agregar el HTML para que el Slider se pueda visualizar en el blog. Puedes agregarlo donde tú quieras: en una entrada, página o barra lateral. Solo debes copiar el código y pegarlo donde acepte HTML en el blog:

HTML<div class="slider-img"> <!--Empieza-->
<div class="item-slider">
<img src="url" alt="texto"/>
</div>
<div class="item-slider">
<img src="url" alt="texto"/>
</div>
<div class="item-slider">
<img src="url" alt="texto"/>
</div>
</div> <!--Termina-->

Para agregar otro elemento debes agregar dentro de slider-img lo siguiente:

HTML <div class="item-slider">
<img src="url" alt="texto"/>
</div>

Conclusión:

Agrega un Slider a tu página web de Blogger y brinda una experiencia visualmente atractiva y agradable a tus visitantes. Con un Slider bien implementado, podrás destacar contenido relevante, mejorar la navegación y capturar la atención de tus usuarios desde el primer momento. No dudes en probar diferentes Sliders para encontrar el estilo que mejor se adapte a tu sitio web y atraer a tu audiencia con contenido dinámico e impactante.

Juan Carlos Sanchez14 de agosto de 2023, 21:13
Excelente información la verdad, mil gracias, genial video el de YouTube
ResponderEliminar
Respuestas
Prof. Natalia Reale14 de diciembre de 2023, 10:32
Hola! Excelente explicación e información. Muchas gracias!
Tengo 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!
ResponderEliminar
Respuestas
Full Programas 1005 de enero de 2024, 19:10
No 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
ResponderEliminar
Respuestas
KIRAWUAN4 de febrero de 2024, 15:45
tendria q ver la plantilla de tu block para tratar de ver el problema y hacer compatible el codigo, si aun necesitas escribeme al discord
ResponderEliminar
Respuestas