¿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
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}
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>
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:
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.
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>
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.
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"