Como insertar Slider en Blogger
Les compartiré el código para que inserten sus sliders de la forma mas rápida y sencilla en sus blogs, El slider que les obsequiare tiene los siguientes beneficios:
- Super ligero, sin plugins ni nada para instalar.
- Diseño minimalista, es decir adaptable a cualquier estilo de blog (noticias, tecnologías, video juegos, recetas, chismes, historias y más)
- Fácil y rápido de configurar (es cuestión de copiar y pegar sus imágenes que desean mostrar)
Dentro de nuestro blog nos vamos a dirigir a opción Tema > Editar HTML y buscamos la
etiqueta de cierre de head </head> y justo encima pegamos el siguiente
código:
<script
type="text/javascript">//<![CDATA[
$(document).ready(function($){
var imgItems =
$('.slider .slider-item').length,
imgPos =
1;
$('.slider
.slider-item').hide();
$('.slider
.slider-item:first').show();
setInterval(function(){
nextSlider();
}, 2000); //
Velocidad de transición de las imágenes en milisegundos
function
nextSlider(){
if( imgPos
>= imgItems){imgPos = 1;}
else
{imgPos++;}
$('.slider
.slider-item').fadeOut(0);
$('.slider
.slider-item:nth-child('+ imgPos +')').fadeIn(1000);
}
});//]]>
</script>
Con este código de script que les mostré en la parte de
arriba ya tenemos el funcionamiento del Slider completado, solo ustedes tienen
que modificar la duración de transición de imágenes que tendrá el slider que
les proporcione y para ello observan el comentario dentro del código sobre los
milisegundos, para que puedas saber exactamente donde debes de modificar.
Ahora agregaremos los estilos para nuestro Slider en Blogger, para ello nos vamos a Tema > Editar HTML y buscamos ]]></b:skin> antes de esta línea de expresión pegamos el siguiente código:
.slideshow{
width: 100%;
position: relative;
}
.slider
.slider-item{
width: 100%;
}
.slider
.slider-item{
overflow: hidden;
}
.slider
.slider-item--img{
width: 100%;
}
En este punto ya tenemos el slider instalado con su
respectivo estilo, solo falta ahora agregar las imágenes que queremos mostrar.
Para este ejemplo voy a agregar el Slider en un Gadget, para ello me voy a
Diseño y agrego un Gadget de tipo HTML/Javascript y pegamos el siguiente
código:
<div class="slideshow">
<div
class="slider">
<div
class="slider-item">
<a
href="VINCULO_1"><img class="slider-item--img"
src="https://i.imgur.com/wiOpBMv.jpg" alt="DESCRIPCION_1"
/></a>
</div>
<div
class="slider-item">
<a
href="VINCULO_2"><img class="slider-item--img"
src="https://i.imgur.com/zqTf48z.jpg" alt="DESCRIPCION_2"
/></a>
</div>
<div
class="slider-item">
<a
href="VINCULO_3"><img class="slider-item--img"
src="https://i.imgur.com/g1Nm8Md.jpg" alt="DESCRIPCION_3"
/></a>
</div>
<div
class="slider-item">
<a
href="VINCULO_4"><img class="slider-item--img"
src="https://i.imgur.com/6Vdg2Yn.jpg" alt="DESCRIPCION_4"
/></a>
</div>
<div
class="slider-item">
<a
href="VINCULO_5"><img class="slider-item--img"
src="https://i.imgur.com/jXDPWmd.jpg" alt="DESCRIPCION_5"
/></a>
</div>
<div
class="slider-item">
<a href="VINCULO_6"><img
class="slider-item--img"
src="https://i.imgur.com/BWWftUp.jpg" alt="DESCRIPCION_6"
/></a>
</div>
<!-- Aquí
agregar más slides -->
</div>
</div>
Les muestro la tabla de modificaciones que deben ustedes de modificar a su gusto
| Valor | Función |
|---|---|
| VINCULO_# | Colocar aquí el link que redirecciona a la pagina sobre la imagen |
| URL_IMAGEN_# | Reemplazar por la url/link de nuestra imagen que tendrá cada elemento de nuestro slider. |
| DESCRIPCION# | Reemplazar por la descripción de nuestro imagen. |
Si quieren agregar mas imagenes solo siguen aumentando el siguiente codigo abajo de los otros, y van haciendo las modificaciones debidas
<div class="slider-item">
<a
href="VINCULO_7"><img class="slider-item--img"
src="https://i.imgur.com/6Vdg2Yn.jpg" alt="DESCRIPCION_7" /></a>
</div>