Slider para Blogger: Imágenes con Movimiento SEXY

¿Quieres agregar un slider para Blogger? Qué suerte tienes, porque te explicare paso a paso como añadir una animación de vídeos o fotos (Slider) sin ningún problema. Y podrás ubicarlo dentro de una entrada, página o barra lateral.

¡Hola! soy Gabriela de peengler.com. Para agregar un Slider, necesitaras aplicar código en la plantilla de tu blog, no será complicado si sigues mis pasos.

Sin más que decir ¡Empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

CSS/Estilos del Slider

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/JAVASCRIPT


<script crossorigin='anonymous' integrity='sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=' src='https://code.jquery.com/jquery-2.2.4.min.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 no tienen estilos y se ven feas XD

Como vez hay opciones que tienen true = verdadero/funciona y false = falso/no funciona. Cualquier duda mírate el vídeo tutorial: Insertar un Slider (Imágenes/Vídeos Deslizantes) en Blogger

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>

⛔ Recomiendo leer:

En conclusión

Espero que te sirva el slider para Blogger en tu blog, por cierto ten en cuenta que suelen llamar la atención del visitante, así que intenta de agregar cosas interesantes y que concuerde con tu sitio.

Si deseas ver más tutoriales sobre blogger clic aquí

¿Te gusto el contenido? Deja tu opinión en los comentarios.

Sígueme en Youtube🔥

Aprende a crear páginas web con HTML, CSS y Javascript.

Me interesa

¿Te gusto el post?

¡Compártelo!