Pubblicato il 20/09/13e aggiornato il

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

demo-slideshow-ultimi-post

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://lh3.googleusercontent.com/-ht2BVauLGkY/UjxR2dTFnjI/AAAAAAAAjic/9i2qSa3KvxQ/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://lh5.googleusercontent.com/-xeHw9x9o_HI/UjxVOSNfccI/AAAAAAAAjio/72wKM82wL4Q/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.




25 commenti :

  1. Bellissimo questo widget! E' possibile però vedere i post di una sola etichetta?

    RispondiElimina
  2. Con questo gadget non si possono inserire i feed di una singola etichetta
    @#

    RispondiElimina
    Risposte
    1. C'è un gadget ( con relativo articolo magari :P) simile a questo con cui si visualizzano post di una determinata etichetta .Grazie mille :)

      Elimina
    2. Slideshow non ce ne sono ma widget quanti ne vuoi basta sostituire l'URL dei feed
      http://www.ideepercomputeredinternet.com/2013/03/blogger-feed-url.html
      che in questo caso però non può essere fatto
      @#[

      Elimina
  3. Ciao Ernesto, ho inserito i codici nel blog, funziona perfettamente ma non si vedono le immagini.. potresti consigliarmi qualcosa da fare..? Ti ringrazio in anticipo per il supporto.
    Buona serata

    RispondiElimina
    Risposte
    1. Forse perché inserisci l'Intervallo (Continua a leggere) prima di tutte le immagini
      @#

      Elimina
    2. non ho inserito intervalli, non saprei neanche come fare.. l'ho copiato sostituendo solo il tuo Url col mio, ma non si vedono le immagini...

      Elimina
    3. Forse hai un modello scaricato da internet che crea un incipit del post per la homepage in automatico
      @#

      Elimina
    4. E' stranissimo Ernesto, copiato e incollato così com'è con il tuo url, funziona perfettamente... quando inserisco il mio url si vedono gli articoli ma non le immagini.. Se ti inserisco l'url del blog potresti dare un occhiata? Grazie

      Elimina
  4. Non è che sono un mago :)
    Non saprei proprio perché non ti funziona. Se i titoli si vedono significa che l'URL è giusto e potrebbe dipendere dal tuo modello ma è sola una ipotesi
    @#

    RispondiElimina
    Risposte
    1. Tu sei un mago.. :-)) comunque il modello è quello originale blogger, non vorrei che contrasta con qualche altro codice nel css.... Bhooo

      Elimina
    2. Non credo sia quello. Se il modello è uno di Blogger è un vero mistero ...
      @#

      Elimina
    3. Così, a mero titolo, ti inserisco il link (non cliccabile) se eventualmente volessi dargli un occhiata e verificare come si vede la slide "nelnidodelfalco2.blogspot.it"

      Elimina
    4. Guarda, non te lo so dire con certezza. Prova a cambiare la riga finale del codice in questo modo. Invece di
      makescorr({url:"http://nelnidodelfalco2.blogspot.it"});
      metti
      makescorr({url:"http://nelnidodelfalco2.blogspot.com"});
      Bisogna sempre mettere l'URL canonico con il .com al posto di quello localizzato con il .it
      @#

      Elimina
    5. Ernesto, visto che col tuo url funziona perfettamente.. lo lascio così. Un po' di reclam non fa male, anzi credo ti faccia piacere :-))) Se però così non fosse, fammelo sapere e lo rimuovo.!

      Elimina
    6. Fa sempre piacere avere link verso il proprio blog :)
      @#

      Elimina
  5. Ciao Ernesto, volevo cambiare dimensione...tipo 580 340...in orizzontale e non verticale...ho provato cambiare ampiezza ma non funziona cambiando dimensioni...dovrei cambiare altro vero?

    RispondiElimina
    Risposte
    1. Dovrebbe funzionare. Però ci sono anche altre occorrenze tipo thumbWidth:250 che dovresti provare a cambiare
      @#

      Elimina
    2. Modificata la larghezza ...ma si vedono solo le foto senza i titoli dei post e l'anteprima...e quindi senza possibilità di cliccarci sopra... (,....potrei fare altro? Grazie in ogni caso Ernesto

      Elimina
  6. copiato pari pari e modificate le parti in rosso.. ma solo a me non funziona ?!

    RispondiElimina
    Risposte
    1. È un widget che utilizza JQuery e quindi il tuo template potrebbe avere delle incompatibilità. Leggi qui http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html
      @#

      Elimina
  7. Stavo cercando proprio questo widget. Solo che ti chiedo se sarebbe possibile avere la slide che si sviluppa su più riquadri (es. http://gooyaabitemplates.com/livepreview/bastro/)

    RispondiElimina
    Risposte
    1. Il Template che mi hai linkato non mostra gli ultimi post ma una serie di immagini a scelta magari con link a dei post scelti dal webmaster come queste
      http://www.ideepercomputeredinternet.com/2011/02/widget-di-uno-slideshow-orizzontale-con.html
      o queste
      http://www.ideepercomputeredinternet.com/2012/09/slideshow-foto-blogger-post.html

      @#

      Elimina
  8. Scusami, oltre ai riquadri estesi, non si potrebbe mettere solo la foto con il solo titolo del post? Magari sulla foto, ma so che sarebbe chiedere troppo :D

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.