Slideshow degli ultimi post con miniatura per Blogger.

Widget degli Articoli Recenti presentati in uno slideshow che si riproduce automaticamente con miniature e pulsanti di navigazione.

Quando si progetta il layout di un sito si cerca sempre di presentare ai lettori un estratto dei contenuti che si sono già pubblicati con la speranza che possa suscitare il loro interesse e che possano aprire un'altra pagina del nostro sito. I widget più usati allo scopo sono quelli dei Post più Popolari, quello degli Articoli più Commentati e quello degli Ultimi Post. Forse è proprio quest'ultimo il più utilizzato. Ci sono molte varianti per il gadget degli Ultimi Articoli a partire da quelle più minimaliste fino a quelle più spettacolari come gli slideshow dei post con miniature che utilizzano librerie javascript.

Con questo articolo intendo presentare un widget veramente originale basato su JQuery che si può installare facilmente in una sidebar e che mostrerà gli ultimi 7 articoli pubblicati insieme alle relative miniature e ai bottoni di navigazione

Per l'installazione si va su Bacheca > Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla il seguente codice

<style type="text/css">
.scorr_post{width:250px;height:350px;border:1px solid #191919;background-color:white;padding:10px;font:normal normal 11px/1.4 Georgia;color:#222;margin:0 auto;position:relative;overflow:hidden;text-align:left}
.scorr_post-nav{text-align:center}
.scorr_post-nav a{display:inline;background-color:#222; /* visualizzazione normale */color:white;padding:4px 8px;line-height:2.6em;margin:0 2px;text-decoration:none}.scorr_post-nav a:hover{background-color:#bbb} /* visualizzazione al passaggio del mouse*/.scorr_post-nav a.current{background-color:#757373;} /* pagina aperta */
.scorr_post.loading{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrsOXq3HoOlb2TDexHNY3EVaiMowWN6rxOleBpkS4BwjRUIIc7kg6ZgeWDQJMK5ChZYyj2gg8-mF-xy00AxbPe-srCsg6bcTlp-nzZLZaGr70aOUNjh5ko98X8RC2qoM7gxDAOIqltdOU/s32/loading9.gif');background-position:50% 50%;background-repeat:no-repeat}
.scorr_post .scorr-item{position:absolute;padding:10px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}
.scorr_post .image-wrapper{}
.scorr_post .detail-wrapper{}
.scorr_post 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}
.scorr_post h4{font:inherit;font-weight:bold;
font-size:120%; /* Dimensione font titolo */text-transform:none;
color:#111; /* Colore del titolo del post */margin:10px 0 0}
.scorr_post h4 a{color:inherit;text-decoration:none}
.scorr_post h4 a:hover{color:#360202; /* colore del titolo al passaggio del mouse */text-decoration:underline}
.scorr_post p{margin:10px 0 0}
</style>
<div id="scorr_post" class="scorr_post loading"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/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 makescorr(a){var c={url:"http://www.ideepercomputeredinternet.com",numPost:7,newTabLink:false,labelName:null,showDetail:true,summaryLength:60,titleLength:"auto",showThumb:true,thumbWidth:250,squareThumb:true,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PANl0DHoX5X2yeEZIosmt9BNPfpfa8bjhb7Cnk6EWdQebbk6j8kByjMmp8H9sprLNeg_DE7Hj-SyvX4l53Zc4BUpaJ8TgAXVyvSPuaiiu5JMiD3I8BOf-rLOkBFIzLEmTk1K7-4jzfk/s72/sfondo.png",showNav:true,navText:{prev:"<",next:">"},containerId:"scorr_post",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="scorr-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="scorr_post-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("Errore 404 non trovato!")}},"jsonp")};</script>
<script type="text/javascript">
makescorr({url:"http://www.ideepercomputeredinternet.com"});
</script>

Si tratta di un widget di dimensioni 250x350 pixel e che mostra i pulsanti di navigazione per spostarsi tra i vari post. La riga evidenziata di giallo è il javascript JQuery e può essere tralasciata se nel modello abbiamo già questa libreria. Come mio solito ho postato in rete una demo del gadget

I colori della demo non sono il massimo perché vengono ereditati quelli del blog che non sono ben intonati a quelli proposti per il widget. Le personalizzazioni più importanti sono state colorate di rosso:

1. Il dominio del blog di cui vogliamo mostrare gli ultimi articoli
2. I colori in situazione normale e al passaggio del mouse dei pulsanti di navigazione, del bordo del gadget e del titolo del post. I meno esperti possono consultare il post sui codici dei colori 
3. Il numero dei post da mostrare sono 7
4. La famiglia dei caratteri (Georgia)

La larghezza di 250 pixel è stata calcolata per mostrare proprio 7 articoli. Consiglio solo ai più bravi di provare a modificare questa impostazione perché può essere fatto solo cambiando anche gli altri parametri.