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 CSS que tendrá nuestro Slider. Para ello entramos a Plantilla > Configuración > añadir CSS, y pegamos l siguiente codigo.
#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 4.90/5 -1289 HoyGeek
