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>



<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:
 .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>


<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:

  1. dots: true Son los puntitos o indicares, se visualizan debajo de la imagen/vídeo
  2. infinite: true Sirve para que el slider se desplace siempre
  3. speed: 500 Es la velocidad, puedes hacerlo m√°s lento o m√°s r√°pido
  4. fade: true Aplica un efecto desvanecedor cuando cambia la imagen
  5. autoplay: true Las imágenes/vídeos se mueven automáticamente
  6. 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:


<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:

 <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.

Entradas que pueden interesarte

5 comentarios

  1. Excelente información la verdad, mil gracias, genial video el de YouTube

    ResponderEliminar
  2. 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
    1. 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

      Eliminar
  3. 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
  4. 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