Slider sencillo para Blogger

d

VER DEMO

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.