Widget degli Ultimi Post per Etichetta con Miniature per Blogger

Si va su Modello < Backup/Ripristino > Scarica modello completo per un backup di sicurezza. Successivamente si va sempre su Modello > Modifica HTML > Procedi e, pigiando F3 o Ctrl+F, si cerca la riga  ]]></b:skin>. Per inciso ricordo che alcune volte in questa riga va a finire anche la parentesi graffa che chiude il CSS precedente diventando così }]]></b:skin>. In questo caso bisogna ricordarsi diinserire il cursore subito dopo la parentesi graffa e cliccare su Invio per separarla. 
Subito prima della riga colorata di rosso incollare i seguenti fogli di stile:




/* Ultimi Post per Etichetta */ 
img.label_thumb{ 
float:left; 
border:1px solid #7e7e7e; /* Colore del bordo delle miniature */ margin-right:10px !important; 
height:55px; /* Altezza delle miniature */ 
width:55px; /* Larghezza delle miniature */ 

.label_with_thumbs { 
float: left; 
width: 100%; 
min-height: 70px; /* Altezza elemento */ 
margin: 0px 10px 2px 0px; 
padding: 0; 

ul.label_with_thumbs li { 
padding:8px 0; 
min-height:70px; 
margin-bottom:10px; 

.label_with_thumbs a {} 
.label_with_thumbs strong {padding-left:0px;}

parametri colorati di rosso possono essere modificati secondo il significato specificato neicommenti a fianco colorati di verde.
Adesso occorre cercare la riga </head> e, subito prima,incollare quest’altro codice:




<!– Ultimi Post per Etichetta Inizio –>
  <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://lh4.googleusercontent.com/-goMMvqqAMTs/Tp_qmX2LqtI/AAAAAAAAUus/fZ4PL3GX96s/s70/no-image.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]=”Ene”;monthnames[2]=”Feb”;monthnames[3]=”Mar”;monthnames[4]=”Abr”;monthnames[5]=”May”;monthnames[6]=”Jun”;monthnames[7]=”Jul”;monthnames[8]=”Ago”;monthnames[9]=”Sep”;monthnames[10]=”Oct”;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 Comments’)commenttext=’1 Comment’;if(commenttext==’0 Comments’)commenttext=’No Comments’;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”>Más »</a>’;flag=1;;}
document.write(towrite);document.write(‘</li>’);if(displayseparator==true)
if(i!=(numposts-1))
document.write(”);}document.write(‘</ul>’);}
//]]>
</script>
<!– Ultimi Post per Etichetta Fine –>



Nel codice è presente l’URL della immagine di default che viene visualizzata quando non ne è presente nessuna all’interno del post. Tale URL può essere sostituito da quello di un’altraimmagine quadrata.


Si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo ultimo codice:


<script type=’text/javascript’> 
var numposts = 4; 
var showpostthumbnails = true; 
var displaymore = false; 
var displayseparator = true; 
var showcommentnum = false; 
var showpostdate = false; 
var showpostsummary = true; 
var numchars = 100; 
</script> 
<script type=”text/javascript” src=”/feeds/posts/default/-/nome-etichetta?published&alt=json-in-script&callback=labelthumbs”></script>

dove al posto di nome-etichetta si inserisce il tag di cui vogliamo visualizzare gli ultimi articoli

Si clicca su Salva e si posiziona l’elemento nel punto prescelto della sidebar
I parametri hanno il seguente significato
  1. var numposts                   : numero degli articoli da visualizzare
  2. var showpostthumbnails   : mostrare le miniature (true), non mostrarle (false)
  3. var displaymore               : mostrare o non mostrare il link del Read More (true o false)
  4. var displayseparator        : mostrare o non mostrare un separatore tra i vari elementi (true o false)
  5. var showcommentnum       : mostrare o non mostrare il numero dei commenti (true ofalse)    
  6. var showpostdate            : mostrare o non mostrare la data dei post (true o false)
  7. var showpostsummary      : mostrare o non mostrare l’incipit dei post (true o false)
  8. var numchars                   : il numero dei caratteri dell’incipit degli articoli (100)
Se volete visualizzare gli ultimi post di una etichetta formata da due parole divise da uno spazio, ricordo che bisogna usare i caratteri %20. Se per esempio vogliamo creare il widget per il tag primi piatti occorre inserire al posto di nome-etichetta l’espressione primi%20piatti. Ricordo infine che le etichette sono case sensitive e che quindi le minuscole sono considerate diverse dalle maiuscole