16 septiembre 2013

Slider automatico en sidebar (blogger)

slider-sidebar
Lo que hace exactamente este Slider es mostrar las ultimas entradas publicadas en tu blog de manera automatica y esto lo realizara por medio de nuestro feed, con una paginación bastante agradable.

Se trata de un Slider automatico que funciona a base de jquery, con CSS y un poco de HTML, asi que es muy editable.

Está diseñado a una anchura de 250px de ancho por 340px de alto y es totalmente configurable.






Para colocar este slider en Blogger, entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:

<style type="text/css">
.slider-sidebar{width:250px;height:350px;border:1px solid #ccc;background-color:white;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#333;margin:0 auto;position:relative;overflow:hidden;text-align:left}
.slider-sidebar-nav{text-align:center}
.slider-sidebar-nav a{display:inline;background-color:#333; /* paginación visible*/
color:white;padding:4px 8px;line-height:2.6em;margin:0 2px;text-decoration:none}.slider-sidebar-nav a:hover{background-color:#ccc} /* paginación al pasar cursor*/
.slider-sidebar-nav a.current{background-color:#9f9e9e} /* paginación activa*/
.slider-sidebar.loading{background-image:url('data:image/gif;base64,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');background-position:50% 50%;background-repeat:no-repeat}
.slider-sidebar .slider-item{position:absolute;padding:10px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}
.slider-sidebar .image-wrapper{}
.slider-sidebar .detail-wrapper{}
.slider-sidebar img{display:block;border:none;outline:none;padding:0 0;margin:0 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;max-width:none;max-height:none}
.slider-sidebar h4{font:inherit;font-weight:bold;
font-size:120%; /* tamaño del titulo*/
text-transform:none;
color:#000; /* color del titulo*/
margin:10px 0 0}
.slider-sidebar h4 a{color:inherit;text-decoration:none}
.slider-sidebar h4 a:hover{color:#880505; /* color titulo pasar cursor*/
text-decoration:underline}
.slider-sidebar p{margin:10px 0 0}
</style>
<div id="slider-sidebar" class="slider-sidebar loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function(a){a.fn.customRotator=function(c){c=a.extend({interval:6000,speed:1000,hoverPause:true,autoHeight:false,crossFade:false,autoSlide:true,hide:function(d){},show:function(d){}},c);var b=true;return this.each(function(){var k=a(this),e=k.children().hide(),d=k.next(),g=null,j=0,f=0;function h(){c.hide(f);d.find(".current").removeClass("current");b=false;if(e.eq(f).next().length){if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){a(this).next().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}f++})}else{e.eq(f).fadeOut(c.speed);e.eq(f).next().fadeIn(c.speed,function(){c.show(f);b=true;f++});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}}d.find(".rotator-num a").eq(f+1).addClass("current")}else{if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){f=0;e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}})}else{e.eq(f).fadeOut(c.speed);e.first().fadeIn(c.speed,function(){c.show(0);b=true;f=0});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}}d.find(".rotator-num a").first().addClass("current")}if(j==0&&c.autoSlide){g=setTimeout(h,c.interval)}}if(e.length>1){c.hide(f);e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}if(c.hoverPause&&c.autoSlide){k.mouseenter(function(){clearTimeout(g);j=1}).mouseleave(function(){g=setTimeout(h,c.interval);j=0}).trigger("mouseleave")}else{g=(c.autoSlide)?setTimeout(h,c.interval):null}d.find(".rotator-num a").click(function(){if(b){b=false;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}f=a(this).index();a(this).parent().find(".current").removeClass("current");a(this).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false});d.find(".rotator-advancer a").click(function(){if(b){b=false;var l=this.hash.replace("#",""),i=e.length;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}if(l=="next"){f=(f<i-1)?f+1:0}else{f=(f>0)?f-1:i-1}d.find(".current").removeClass("current");d.find(".rotator-num a").eq(f).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false})}})}})(jQuery);function makeSlider(a){var c={url:"http://www.amorsevillista.com",numPost:7,newTabLink:false,labelName:null,showDetail:true,summaryLength:60,titleLength:"auto",showThumb:true,thumbWidth:250,squareThumb:true,noThumb:"http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",showNav:true,navText:{prev:"<",next:">"},containerId:"slider-sidebar",interval:6000,speed:1000,hoverPause:true,crossFade:false,autoHeight:false,autoSlide:true,onInit:function(){},onHide:function(d){},onShow:function(d){}};for(var b in c){c[b]=(typeof(a[b])!=="undefined")?a[b]:c[b]}$.get(c.url+"/feeds/posts/summary/"+(c.labelName===null?"":"-/"+c.labelName.replace(/\,(\s+)?/g,"/"))+"?alt=json-in-script&max-results="+c.numPost,{},function(s){if(s.feed.entry!==undefined){var r=s.feed.entry,q,p,e,o,h="",d="";for(var m=0,n=r.length;m<n;m++){if(m==r.length){break}q=r[m].title.$t;e=("media$thumbnail" in r[m])?'<img alt="'+q+'" src="'+r[m].media$thumbnail.url.replace(/\/s72\-c/,"/s"+c.thumbWidth+(c.squareThumb?"-c":""))+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">':'<img src="'+c.noThumb+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">';o=("summary" in r[m]&&c.summaryLength>0)?r[m].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/[<>]/g,""):"";o=(c.summaryLength<o.length)?o.substring(0,c.summaryLength)+"…":o;for(var l=0,f=r[m].link.length;l<f;l++){p=(r[m].link[l].rel=="alternate")?r[m].link[l].href:"#"}h+='<div class="slider-item">';h+=(c.showThumb&&c.showDetail)?'<div class="image-wrapper">'+e+"</div>":(c.showThumb&&!c.showDetail)?'<div class="image-wrapper"><a href="'+p+'" title="'+q+'"'+(c.newTabLink?' target="_blank"':"")+">"+e+"</a></div>":"";h+=(c.showDetail)?'<div class="detail-wrapper"><h4><a title="'+q+'" href="'+p+'"'+(c.newTabLink?' target="_blank"':"")+">"+((c.titleLength=="auto")?q:q.substring(0,c.titleLength)+(q.length>c.titleLength?"…":""))+"</a></h4><p>"+o+"</p></div>":"";h+="</div>";$("#"+c.containerId).css({width:(c.showThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("width"),height:(!c.showDetail&&c.squareThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("height")})}d='<div class="slider-sidebar-nav"'+(c.showNav===false?' style="display:none;"':"")+">";d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#prev">'+c.navText.prev+"</a></span>":"";if(c.showNav===true||c.showNav=="number"){d+='<span class="rotator-num">';for(var g=0;g<c.numPost;g++){d+='<a href="#slide-'+g+'" class="'+(g===0?"current":"")+'">'+(g+1)+"</a>"}d+="</span>"}d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#next">'+c.navText.next+"</a></span>":"";d+="</div>";$("#"+c.containerId).html(h).after(d);c.onInit();$("#"+c.containerId).removeClass("loading").customRotator({interval:c.interval,speed:c.speed,autoHeight:c.autoHeight,hoverPause:c.hoverPause,crossFade:c.crossFade,autoSlide:c.autoSlide,hide:function(i){c.onHide(i)},show:function(i){c.onShow(i)}})}else{$("#"+c.containerId).removeClass("loading").css({width:"auto",height:"auto"}).html("Error no encontrado!")}},"jsonp")};</script>
<script type="text/javascript">
makeSlider({url:"http://nombre de tu blog.blogspot.com"});
</script>

Ajustes:
Si tienes instalada ya en tu blog la librería jquery, puedes suprimir esta parte del código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Cambia el nombre de tu blog donde se indica y listo.
En negrita puedes ver algunas variantes para modificar el slider.
Para configurar el número de entradas a mostrar, ( numPost:7) procura no colocar un número alto pues la navegación se saldrá del slider.


20 comentarios

Muchas gracias. Muy buen aporte.

Es una lástima que clickeando encima de la imagen no te lleve al artículo. No se puede solventar eso??

Ignacio, al artículo te lleva clikeando en el título de del post.
Gracias por comentar y Saludos.

Hola Antonio.
Me gusta este slider, que le puede venir bien a mi nueva plantilla.
En donde tengo que cambiar el código, pues quiero que me salga como lo tienes tú, cubriendo toda la parte superior del blog, pero solo me sale la imagen de un artículo.

Gracias.

Perdona, ya me di cuenta del error.
Este es para el sidebar, ya veo que tienes otra entrada que lo explicas fenomenal.
Un saludo.

Realmente es muy bueno en todo el diseño y fácil de colocar. Pongo una pega.... si queremos que las entradas que muestre sean aleatorias entre todo las entradas introducidas en el blog y no las siete últimas, ¿Cómo se hace?

Cjam, habría que modificar totalmente el script y conlleva bastante tiempo el llevarlo acabo, cosa que ahora no dispongo, quizás más adelante y con tiempo lo publique.

Gracias por tu comentario y tu visita.
Saludos.

Muchas gracias no obstante.
Ya me avisarás si lo haces.
El slider está fenomenal pero repite las entradas recientes que se ven ya en el propio blog. Era una sugerencia. Ya me dirás

Hola, gracias por compartir, me va genial, pero me gustaría ajustar la imagen ya que me sale recortada. ¿Es posible?
Gracias.
http://blogdemacgiver.blogspot.com.es/

Jorge este slider está pensado solo para la sidebar aunque se puede adaptar al cuerpo principal como lo has echo tú, pero ese es el problema, te recorta las imágenes.
Puedes ver otra clase de slider dispuesto para el cuerpo del blog, como estos ejemplos: 1, 2, 3, 4.
Estos son algunos ejemplos, pero en Internet hay multitud de ellos.

Hola, buenas tardes, Amor Sevillista :)
Mira, yo continúo intentando colocar esta slider, pero infructuosamente.
Intenté colocarla en otro de mis blogs, http://plantandoeternidad.blogspot.mx, y ahí sí que se activa, pero SIN imágenes :-/ No entiendo qué pasa en el otro blog... No entiendo qué pasa con la slider, que no puedo hacer ni que funcione, ni que muestre imágenes cuando funciona... Y fíjate que funciona con y sin el signo "/"... O sea, el problema NO es la url del blog, es otra cosa.

Este comentario ha sido eliminado por el autor.

LaProfe, el problema de las imágenes es que no la subes a blogger sino que las subes a un servidor aparte como servimg.
Cuando crees una nueva entrada sube la imagen desde el editor de blogger, ya verás como se visualizarán todas ellas.
El slider funciona con la url de tu blog pero el problema de las imágenes es ese.

Hola, Amor Sevillista...
Gracias por las molestias que te tomas :)
Si has visitado el blog, te darás cuenta que tengo puestas las dos slideshow, una que va abajo de la cabecera (se modifica la plantilla) y la otra en la columna lateral (que se pone en un gadget).
Ahorita que voy abriendo el blog, el carrusel lateral estaba funcionando, y ciertamente una de las imágenes no aparecía. El otro carrusel sigue sin funcionar.
Entonces fui a editar la entrada de la imagen que no aparece, guardé la imagen en mi PC, y luego la subí desde el editor de blogger. Cuando le di a "Ver blog", el carrusel ya no funciona... Le he dado a actualizar varias veces, y nada.
O sea, no parece que sea sólo problema de las imágenes. Simplemente ninguno funciona, y no tengo idea de por qué.

Hola!
Desde el año pasado utilizamos este slideshow y nos ha dado excelentes resultados. Desde hace dos días para acá solo proyecta de 10 foto, una. Desconocemos si es un problema del servidor donde está alojado, o si existe alguna actualización inconsulta de Windows que que nos hace interferencia. O si es que hay fotos encriptadas que se ven en el blog y no en el slideshow. Si pudieran ayudarnos con esto. Gracias anticipadas.

Marihal el blog de pruebas funciona correctamente, le he colocado 20 entradas y se visializan todas.
Puede ser de algún código javascript que hayas añadido ultimamente.

Muchísimas gracias Antonio.
Saludos desde la isla: República Dominicana.
Voy a analizar qué he hecho y si no lo encuentro volveré para consultarte.
Un saludo por supuesto sevillista!

Hola Antonio!
De nuevo aquí.
Quiero dar testimonio del problema que hubo con este gadget.
Hubo un cambio de servidores en Google.
Ya las imágenes se están restableciendo.
Google resolvió el problema para una parte de los usuarios de blogger que lo sufrimos.
En unos días vuelvo para acá a ver qué de nuevo tienes para Navidad, el año pasado usé todos los adornos que publicaste.
Gracias por todo y no quiero despedirme sin decirte que también, al igual que todos tus seguidores te consideramos un crak.

Muy bueno. ¿Cómo se puede aplicar este script, pero para entradas por categorías o etiquetas?

Pedro el script está adaptado a las últimas entradas, para mostrarlo por etiquetas o categorías habría que modificarlo por completo.
Tomo nota para un próximo post.

Muchas gracias, lo estaré esperando


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"