Pubblicato il 01/03/16 - aggiornato il  | 21 commenti :

Widget per Blogger dello Slideshow verticale animato con miniature degli Ultimi Articoli.

Come installare il widget dello slideshow che mostra a rotazione gli Ultimi post con Titoli e miniature in un blog di Blogger. Completamente personalizzabile nei colori e nella velocità di riproduzione.
Oggi riprendo uno dei gadget più belli mai realizzati per Blogger che è quello dello slideshow verticale degli Ultimi Post o se si vuole degli Articoli Recenti. Con le impostazioni proposte completamente personalizzabili si visualizzeranno a rotazione gli ultimi 8 articoli con titoli e miniature a blocchi di 4 che si alterneranno con uno scorrimento verticale.

Le miniature saranno quelle delle prime foto pubblicate nei post. Se le immagini sono postate dopo il Read More o Intervallo non saranno però rilevate e allora si potranno inserire delle immagini di default da visualizzare qualora non fosse possibile farlo per le foto all'interno dei post.

In questo slideshow si potranno mostrare opzionalmente anche i commenti e la data. Lo script si deve a un vecchio lavoro di Abu Fahran che utilizza la libreria jQuery.

slideshow-verticale-blogger

Per dare una idea più precisa del suo funzionamento ecco anche una GIF animata

slideshow-verticale-animato-jquery

Visto che a partire dal prossimo 31 Agosto 2016 Google Drive cesserà il supporto di Hosting ho unificato tutti i codici per non dover essere dipendenti da un servizio esterno. Per la sua installazione non occorre modificare il template. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla questo codice

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:340px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:72px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho48RF6-2gxbXZx-AqaroFx6jBMeFi5Wq4IE_liyEkIml5xbIBt6-64gjMVtWfSPnTSzdVMWB244XVI366BQX7ykA4I1FU6RjhauBjVj0sN4nO9zlqKwFhBl2qjOopVa8IBghklXIt4eY/w1-h211-no/sfondo.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Georgia;
}
.spycomment{
overflow:hidden;
font-family:Georgia;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
    <script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoOGdh8hDyV0g9uv-jey1DByBWxUp5am3C5myJ0IOm4vBizyziXnrLU2ZuB3RgANSgpfbp953Cruh8OlZ62JhJO5y7RmvYBFSqCmHP1iPG4IoXNrCUWWc-A9lyVMLFElF5kC6Rg9iaOw/w135-h103-no/default1.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06wuQ-iA8lbof7waVGP-J2goclSv6Dlx6lWK8diorv8PO6YBg2gBA8r1jHsaMSjmCQ0qZ1Yd9cPnqbJjpnwW1GaFmVxm-9IwkoYru3K75wM6L01Sg3JMO3eFyiQTuDsR-f0PL5NZYxLw/w130-h98-no/default2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYSP0TNayaI-ODek_br3F3YpZPw7djiAZwtPsgCwVlorHjnOMTRUzsv0qTQDanNhA0TbzpNg6nsFVL-O7ILVNOe2u1fs4ecZEfJnlhIFwt14W0-K0P6WHB3TZzFj5YuUOVUa_kXmFWOw/w140-h97-no/default3.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wBwga-DIDFVCXdj8Zt8EKp91nz8vnsmkmKaqcTrRwPmxiBNhoK79-B_uxNpL4IbljpfZBlo3zLhvsYeb27Zlc75-fNze-r5v-92kdihqcayuxNTufJxJziT285PuTifrJ9m8GbmVu2s/w135-h101-no/default4.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6wTkCLE_McRfI9HW4Yz3H85YHIzXcSNwMm4UX4EMgZd69C9YHbsuV4rxugHrJuMOuhpgNRL6DiYONahpuvOp8NhlHEEmmGUgcGNZm9JQZ-XhyUWOmoSp-2oPf3XTIB5IgcHj_960s4g/w135-h101-no/default5.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "commenti";
showPostDate = true;
summaryPost = 50;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 8;
home_page = "http://www.ideepercomputeredinternet.com/";
limitspy=4;
intervalspy=4000;</script>
<div id="spylist">
<script type="text/javascript">
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
</script>
</div>

Si clicca su Salva e con il trascinamento del mouse si posiziona in una sidebar.


PERSONALIZZAZIONE DELLO SLIDESHOW

  1. La larghezza esterna del widget è proposta di 350 pixel che può essere modificata
  2. La larghezza interna del widget è proposta in 340 pixel e dovrà essere inferiore alla precedente
  3. 72 pixel è l'altezza di ciascun elemento
  4. 70 pixel è la dimensione delle miniature
  5. 12 pixel è la dimensione dei caratteri del titolo
  6. I codici dei colori possono essere cambiati per adattarli a quelli del nostro blog
  7. La famiglia di font Georgia può essere sostituita da un'altra
  8. Nel codice sono presenti cinque immagini di default che vengono visualizzate nel widget quando nei post non ci fossero delle immagini. I loro URL sono colorati di viola e possono essere sostituiti da altri di immagini di vostro gradimento.
  9. aBold = true; serve per il grassetto, se non si vuole si sostituisce con false
  10. commenti è il testo che viene visualizzato accanto al loro numero
  11. showPostDate = true; se si vuole mostrare la data del post altrimenti mettere false
  12. numposts =8; rappresenta il numero dei post che saranno visualizzati. Il widget mostrerà solo 4 articoli ma saranno 8 quelli che si visualizzeranno a rotazione.
  13. Sostituire l'URL di questo blog con quello del vostro sito ricordandosi se avete un blog gratuito di utilizzare il canonico .com e non il localizzato .it.
  14. cellspacing = 6; è la distanza tra i 4 elementi del widget
  15. intervalspy=4000 serve per settare la velocità di riproduzione dello slideshow. 4000 sono i millisecondi che intercorrono per passare da un elemento a un altro. Per velocizzare il gadget bisogna diminuire questo numero mentre per rallentare occorre aumentarlo.


21 commenti :

  1. ok...le immagini funzionano e scorrono (quelle che voglio io nel blog)
    ma come faccio a collegare con un link ogni immagine???

    RispondiElimina
    Risposte
    1. I link sono presenti in tutti i post visualizzati in modo automatico. Basta cliccare in un qualsiasi punto di ciascun elemento (miniatura, titolo, ecc)
      @#

      Elimina
    2. Credo di non essermi spiegato bene...non voglio utilizzare quei link predefiniti...ma voglio mettere un link che manda le immagini mie.
      Non quelle dei post...scusa il disturbo e grazie in anticipo

      Elimina
    3. Allora il widget giusto non è questo. Prova una di queste soluzioni
      http://www.ideepercomputeredinternet.com/2015/07/slideshow-blogger.html
      http://www.ideepercomputeredinternet.com/2015/10/slideshow-blogger-immagini-navigazione-link-post.html
      http://www.ideepercomputeredinternet.com/2014/07/slideshow-immagini-fade-effect-link-blogger.html
      http://www.ideepercomputeredinternet.com/2012/09/slideshow-foto-blogger-post.html
      @#

      Elimina
  2. Perché a me non scorre ma rimane fermo ai primi 4 post?

    RispondiElimina
    Risposte
    1. Questo widget utilizza una vecchia versione di jQuery e con quella più recente non funziona. Sarà per quello che è incompatibile con il tuo modello
      @#

      Elimina
    2. Hai ragione, perché l'ho inserito in un altro blog che utilizza un modello diverso e funziona perfettamente :)

      Elimina
  3. Grazie!
    Ho seguito le tue istruzioni ma non riesco a modificare la dimensione e il font del titolo.
    Cosa sbaglio ...?
    http://my-way-online.blogspot.it/

    RispondiElimina
    Risposte
    1. Forse il problema sta nei CSS del tuo blog. Prova a sostituire questo codice
      #spylist li a {
      text-decoration:none;
      color:#4B545B;
      font-size:11px;
      height:18px;
      con quest'altro
      #spylist li a {
      text-decoration:none;
      color:#4B545B;
      font-size:14px !important;
      height:18px;

      in cui il tag font-size è stato rafforzato con !important per dargli priorità
      @#

      Elimina
  4. Provo a chiederti ancora una cosa.
    Non capisco perché il titolo dei post rimane leggermente tagliato a destra.
    Ho provato a diminuire la larghezza esterna e interna ma non ho risolto.
    Grazie!

    RispondiElimina
    Risposte
    1. Le due larghezze le devi aumentare p.e 365 al posto di 350 e 355 al posto di 340.
      @#

      Elimina
    2. Direi che non cambia nulla ..:-(
      Ho anche provato ad aumentare leggermente la grandezza delle miniature ma ho lo stesso problema.
      Forse è il momento di cambiare il template!

      Elimina
    3. Il tuo blog è questo?
      http://my-way-online.blogspot.it/
      Se è così hai una sidebar larga 315-318 pixel. È chiaro che questo widget non c'entra. Poi ci sono anche le ombreggiature. Prova a mettere 305 al primo width e 295 al secondo. In alternativa puoi allargare la sidebar
      http://www.ideepercomputeredinternet.com/2011/05/come-cambiare-la-larghezza-del-blog-e.html
      @#

      Elimina
    4. Grazie! Ho fatto entrambe le cose (allargare la sidebar e modificare il width) e mi sembra vada molto meglio. Qualche titolo rimane ancora leggermente "mozzato". Provo a fare qualche modifica.

      Elimina
  5. Ciao Ernesto ho inserito ora nel mio blog questo bel widget in movimento che funziona, ho apportato solo poche modifiche ma ti chiedo se è possibile togliere i commenti e lo sfondo sotto i titoli. Mi puoi dare anche le misure proporzionate delle miniature di poco superiori a quelle esistenti. Grazie

    RispondiElimina
    Risposte
    1. Per lo sfondo togli questo codice

      url(https://lh5.googleusercontent.com/-GnMKwC95YBk/U5AvYGfwb9I/AAAAAAAAndA/hJ6OaDyUtAk/w1-h211-no/sfondo.jpg) repeat-x

      ma lascia il punto e virgola dopo fff
      Per il numero dei commenti è un po' complicato e le miniature delle immagini sono quadrate
      @#

      Elimina
    2. Ok sono riuscita a togliere il colore dello sfondo ma mi piacerebbe togliere anche il bordo intorno(assomigliano a delle etichette) vorrei solo la miniatura e il titolo. E' possibile?

      Elimina
    3. Ciao Ernesto scusa se insisto ma è possibile togliere oltre allo sfondo colorato che ho già fatto, anche il bordino intorno? vorrei che apparissero solo le miniature e il titolo. altra cosa c'e la possibilità di avere questo tipo di widget con miniature in doppia fila in movimento ma senza testo? Grazie

      Elimina
    4. Devi capire che ci sono alcuni limiti alle modifiche che si possono fare. Il primo limite è quello del widget in sé che può essere modificato fino a un certo punto e il secondo è invece un mio limite. Se per fare la cosa che mi si chiede impiego qualche minuto allora aiuto chi me lo ha chiesto ma non posso mettere in tavola un lavoro di ore solo per rispondere a un commento. Bisogna imparare a accontentarsi
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy