Widget degli Ultimi Post con miniatura per una data etichetta di Blogger.

Un gadget degli Ultimi Articoli che mostra titolo, miniatura e snippet degli ultimi post pubblicati con una data etichetta.

I gadget che mostrano gli ultimi articoli di un sito su piattaforma Blogger sono piuttosto numerosi come lo sono quelli che mostrano gli ultimi post relativi a una determinata etichetta. A tal proposito ricordo come si possa addirittura creare un widget con cui visualizzare tutti i post di una determinata etichetta e come si possa anche inserire in una pagina statica.

In linea di massima si può convertire un widget degli ultimi post in un gadget degli ultimi post per una data etichetta e viceversa semplicemente operando sull'indirizzo dei feed. In questo articolo verrà illustrata una alternativa di un widget degli ultimi post per etichetta che mostra anche le miniature della prima immagine dell'articolo qualora questa fosse presente.

La miniatura è inserita in un bordo con sfondo con colori personalizzabili che mutano quando l'elemento viene puntato dal cursore. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> . Subito sopra si incolla questo codice

/* Ultimi post per etichetta */
img.label_thumb{
float:left;
padding:5px;
border:1px solid #7e7e7e;
background:#D2D2D2;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f7f7;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
list-style:none;
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}

Si cerca poi l'altra riga </head> e, subito sopra, si incolla quest'altro codice

<!-- Ultimi post per Etichetta -->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoj_pc_0RbHgnod-qXkIRkbezHkmu1tY9kfeBV_1fwwR1ItD_Q9cKGfGtRZznMYSI4n44y6kZ5blMUbuUcqq5BiQW75psFc0zAcR69kYufg4DKUHfmwf9pkxQ2c5BQri6ZFu7M8vuLCKyi/s70/noimage.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Gen";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="Mag";monthnames[6]="Giu";monthnames[7]="Lug";monthnames[8]="Ago";monthnames[9]="Set";monthnames[10]="Ott";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Commenti')commenttext='1 Commento';if(commenttext=='0 Comments')commenttext='Nessun Commento';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Si salva il modello. Per inserire il gadget vero e proprio dobbiamo andare su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla quest'ultimo codice

<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90;</script>
<script type="text/javascript" src="/feeds/posts/default/-/etichetta?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Si salva e si posiziona con il drag & drop del cursore.

Le personalizzazioni più importanti sono state evidenziate di colore rosso e sono le seguenti:

1. Colore del bordo e dello sfondo delle miniature (#7e7e7e e #D2D2D2)
2. Colore dello sfondo delle miniature al passaggio del mouse (#f7f7f7)
3. Dimensione delle miniature (55 pixel)
4. URL della immagine di default da visualizzare se non ce ne sono nel post
5. Il numero dei post da mostrare (6)
6. Il numero dei caratteri dell'incipit (90)
7. Il nome della etichetta da sostituire a etichetta

Ricordo che si possono mostrare anche i post che abbiano contemporaneamente due etichette date. Volendo si può inserire tutto il codice in un widget HTML/Javascript incollando i tre blocchi uno dopo l'altro con l'accortezza che il primo blocco dovrà essere inserito tra le righe <style> e </style>.

Fonte | Spice Up Your Blog -