Slider Responsive para Blogger

Esta no es la primera vez que compartimos un tutorial sobre cómo instalar un slider en Blogger, ya tenemos tres diferentes tutoriales sobre slidershow para blogger. Pero lo que hace diferente a este tutorial es que este slider para blogspot es completamente responsive, es decir adaptable a dispositivos móviles. Además, tiene muchas configuraciones que lo hacen un slider completamente versátil.

Una de las grandes características de este slider responsive para blogger es la posibilidad de poder personalizarlo a tu gusto, las opciones son infinitas. Hoy te voy a compartir un tutorial de cómo agregar un slider en tu blog de Blogger de una manera rápida y sencilla con las configuraciones básicas.

Agregar estructura de Slider en Blogger

Lo primero que debemos hacer es agregar la estructura del slideshow en nuestro blog. Para ello debemos de copiar el siguiente código en la sección donde desees mostrar el slider en tu blogger.

<div class='clase-slider'>
  <div><img src='IMAGEN' alt='DESCRIPCIÓN'/></div>
  <div><a href='ENLACE'><img src='IMAGEN' alt='DESCRIPCIÓN'/></a></div>
</div>

En la estrcutura HTML he agregado dos imagenes o slide, la primera (línea 2 del código) solo contiene una imagen y la segunda (línea 3 del código) tiene la opción de poder agregar un enlace a la imagen. Dependiendo de el uso que le puedan dar ustedes podrán agregar más slide con enlace o sin enlace.

En este código debemos de hacer algunas modificaciones sencillas como agregar nuestras imagenes y descripciones. Te compartiré una tabla donde te explico cada parte que debes de modificar.

Instalar Slider en nuestro Blog

Ya tenemos la estructura de nuestro slider en Blogger, ahora lo que debemos hacer es verificar si nuestro blog tiene integrado jQuery, para ello en HoyGeek tenemos un tutorial donde lo explicamos paso a paso.

Luego de verificar si nuestro blog tiene jQuery el siguiente paso es entrar en Tema > Editar HTML y buscar jquery. Te debe de salir algo similar a lo siguiente:

Ahora justo debajo de esa línea de código de jQuery que aparece en la imagen anterior debemos de pegar lo siguiente:

<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'/>

Una vez agregado el código anterior el resultado final de cómo debería quedar es el siguiente:

<script src='https://code.jquery.com/jquery-3.5.1.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'/>

El siguiente paso es agregar los estilos generales de nuestro slider, para ello en el mismo Editor HTML buscamos la etiqueta </head> y justo encima de la etiqueta pegamos lo siguiente:

<link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css' rel='stylesheet'/>

Configurar Slider en Blogger

El útlimo paso que debemos hacer es configurar el slideshow en nuestro Blogger para ello podemos revisar la documentación oficial del slider donde encontraremos una infinidad de posibilidades de configurar nuestro slider.

Te voy a compartir las configuraciones más esenciales y las que use para el ejemplo del slider para blogger.

Justo debajo de esa línea de código donde localizamos slick.min.js pegamos el siguiente código:

<script>
//<![CDATA[
  (function($){
    $('.clase-slider').slick({
      infinite: true,
      autoplay: true,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      dots: false,
    });
  })(jQuery);
//]]>
</script>

Aúnque a primera vista se ve algo complicado configurarlo no lo es. En este pequeño código he agregar las coniguraciones más básicas del slider para blogger ya que como te mencione antes puedes revisar la documentación para poder personalizarlo aún más. Te voy a explicar cada detalle a configurar del código anterior en la siguiente tabla.