Slider sencillo para Blogger


En HoyGeek tenemos un articulo sobre un Slider Simple para Blogger, pero hemos tenido algunos usuarios que han tenido problemas con este Slider. Ahora actualizaremos ese articulo, y te traemos un Slider mucho más simple de configurar.

Con este slider vamos a tener un resultado parecido al anterior, con la diferencia que es mucho más fácil de instalar y configurar. De esta manera evitaremos problemas que tenias con el anterior Slider.


Al igual que el anterior, para este Slider usaremos la librería de jQuery. Así que tienes que saber si es que tu blog tiene la librería incluida. Aquí tenemos un articulo donde te ayudamos a saber si tu blog tiene jQuery.

Si nuestro blog no tiene la librería de jQuery, nos dirigimos a la sección Plantilla > Editar HTML y agregamos el siguiente código antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Luego de estar seguros de que tenemos la librería de jQuery en nuestro blog, agregamos a continuación de esa misma línea el siguiente código:
<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});//]]>
</script>

Ahora agregaremos los estilos que tendrá nuestro Slider. Para ello entramos a Plantilla > Editar HTML y agregamos los siguientes estilos:
#slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 350px;
  margin: 0 auto;
  padding: 0;
}
#slider > div {
  position: absolute;
  top: 0;
  left: 0;
}
#slider img {
  width: 100%;
  min-height: 350px;
  margin: 0;
  padding: 0;
  border: 0;
}
En los estilos podremos modificar el alto de nuestro Slider, solo tendremos que modificar las propiedades   height    y    min-height  . Es importante que en ambas propiedades coloquemos el mismo valor.

Ahora si agregaremos la estructura de nuestro Slider. Para ello entramos a Diseño y aquí daremos en Añadir un gadget y pegamos el siguiente código:
<div id="slider">
    <div><a href="#"><img src="URL-IMAGEN1"/></a></div>
    <div><a href="#"><img src="URL-IMAGEN2"/></a></div>
    <div><a href="#"><img src="URL-IMAGEN3"/></a></div>
</div>

El siguiente es paso es cambiar el texto   URL-IMAGEN#   por las de nuestras imagenes que queremos mostrar en el Slider y   #   por el enlace que quieran agregar a la imagen.
Slider sencillo para Blogger Slider sencillo para Blogger Reviewed by Sergio Medina on diciembre 11, 2016 Rating: 5

3 comentarios

  1. hola buenas una pregunta que tamaño tienen que tener las imagenes para el slider un saludo y buen tutorial

    ResponderEliminar
  2. Hola. No aclaraste en que parte va el codigo que para el estilo del slider. Lo puse luego de las otras lineas de codigo y no funciono.

    ResponderEliminar

Boletín Semanal

Boletín Semanal