Pon un moderno slider automatico y que funciona para tu blogger

 Por fin!... Un post nuevo para Bloggers, Hoy hablaré o enseñaré ¿Cómo insertar un slider? este, hecho en Jquery, CSS y lógicamente HTML, este post hecho especificamente para un lector que comentó en un artículo anterior aunque el tipo de Slider que solicitaba era algo complejo algo hice a partir del siguiente párrafo.

INSTALACIÓN DEL SLIDER 

Muy bien llegamos a la parte más importante la instalación del Slider para ello se debe tener en cuenta algunos factores para que el slider sea independiente en nuestro blog; a qué va esto?.... a que los scripts y códigos sentenciados funcionen independientemente estos alojandolos en un hosting propio o citándolos directamente.

Si se quiere instalar rápidamente el slider siendo dependiente tan sólo será ir a Escritorio > Diseño > Añadir un gadget > HTML/JavaScript, posteriormente pegaremos el siguiente código: 

Seleccionado todo y copia 

<style type="text/css"> <!-- #slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;} #slidebox, #slidebox ul {width:600px;height:300px;} #slidebox, #slidebox ul li{width:600px;height:300px;} #slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:15px 28px; font-family:Verdana, Geneva, sans-serif; font-size:13px;} #slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;} #slidebox .next{right:0; margin-right:10px; background:url(http://oi61.tinypic.com/20jjsx.jpg) no-repeat left top;} #slidebox .next:hover{background:url(http://oi61.tinypic.com/s41995.jpg) no-repeat left top;} #slidebox .previous{margin-left:10px; background:url(http://oi62.tinypic.com/2wfplav.jpg) no-repeat left top;} #slidebox .previous:hover{background:url(http://oi57.tinypic.com/15dp6yq.jpg) no-repeat left top;} #slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;} #slidebox .thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(http://oi61.tinypic.com/1zu05g.jpg); color:#fff;} #slidebox .thumbs a:hover{background:#fff; color:#000;} #slidebox .thumbs .thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;} --> </style><br /> <br /> <script src="https://dl.dropbox.com/s/3yyfmdy1zu2g2mz/jquery-1.5.2.min.js" type="text/javascript"></script><br /> <script src="https://dl.dropboxusercontent.com/s/k0sckxl69gvu9h3/jcarousellite_1.0.1c5.js" type="text/javascript"></script><br /> <script type="text/javascript"> $(function() { $("#slidebox").jCarouselLite({ vertical: false, hoverPause:true, btnPrev: ".previous", btnNext: ".next", visible: 1, start: 0, scroll: 1, circular: true, auto:1000, speed:500, btnGo: [".1", ".2", ".3", ".4"], afterEnd: function(a, to, btnGo) { if(btnGo.length <= to){ to = 0; } $(".thumbActive").removeClass("thumbActive"); $(btnGo[to]).addClass("thumbActive"); } }); }); </script> <div id="slidebox"> <div class="next"> </div> <div class="previous"> </div> <div class="thumbs"> <a href="#" onclick="" class="1 thumbActive">1</a> <a href="#" onclick="" class="2">2</a> <a href="#" onclick="" class="3 ">3</a> <a href="#" onclick="" class="4">4</a> </div> <ul> <li><img src="URL IMAGEN" width="600" height="300" /></li> <li><img src="URL IMAGEN" width="600" height="300" /></li> <li><img src="URL IMAGEN" width="600" height="300" /></li> <li><img src="URL IMAGEN" width="600" height="300" /></li> </ul> </div>

Por otra parte lo que se encuentra en color Naranja es el link de las imágenes y al lado está establecida la relación del tamaño que es igual a la del Slider (600x300). 

De esta forma finalizo la sencilla instalación de nuestro Slider para imágenes, espero les guste.

Hasta la próxima BloggeRs :)