Widget degli Articoli Recenti con Miniature per Blogger.

Installare il widget degli ultimi post su Blogger.

Ecco un'altra proposta per un widget che mostra gli Ultimi Post con Miniature per utenti di Blogger. Ne ho già presentati altri anche di grande successo come questo gadget degli Articoli Recenti ma i blog hanno le più svariate esigenze e poter scegliere tra varie opzioni è sempre meglio. 

Questo gadget mi risulta essere stato sviluppato da Webaholic e non differisce poi molto dalle altre versioni presenti in rete. La presenza delle miniature accanto al titolo di ciascun post è molto utile per i blog che fanno delle immagini il loro punto di forza. Le personalizzazioni applicabili riguardano però anche la possibile eliminazione della miniatura dall'elenco degli Ultimi Post. Ho tradotto il widget inserendo le iniziali dei mesi in italiano e modificato il javascript per mostrare la data secondo il nostro stile e non nel modo americano che prevede di scrivere prima il mese e poi il giorno.

Per l'installazione non occorre neppure modificare il template ma basta aggiungere un elemento pagina. Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript. Si digita il Titolo del widget e, in Sezioni del sito, si incolla il seguente codice

<style type='text/css'>
img.recent_thumb {padding:1px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {list-style:none; padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 12px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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/AVvXsEjmwZtq1rV0mgt2rbHqD1Z2lApaguJJWTXB37UFlOOCYosDydyPHmmSlXMsRVUesFeoTKVi_QOw_WCv05lXGNZTOm7bmMKHZqRZSwOhxB9tkZLrtINky76mS6CMsCKcx8LHDECWmECdJMJa/s72/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] = "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('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>'); 
    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('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
} 
var towrite='';var flag=0;
document.write('<br><strong>'); 
if(showpostdate==true) {towrite=cdday+ ' - ' + towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdyear;flag=1;} 
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
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">Leggi...</a>';
flag=1;
;
} 
document.write(towrite); 
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>'); 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

dove le personalizzazioni da introdurre riguardano i seguenti parametri:

1. L'URL di questa immagine che è la miniatura che viene mostrata di default quando non sono presenti foto nel post
2. L'indirizzo del blog da sostituire a quello di questo sito nella penultima riga
3. numposts indica il numero dei post che vengono visualizzati (5)
4. numchars indica il numero di caratteri dell'incipit del post (80)
5. Dimensioni dei caratteri del titolo del post font-size: 12px;

Si può applicare il valore true oppure il valore false ai seguenti parametri se si vogliono mostrare o meno gli elementi relativi

1. showpostthumbnails: per mostrare le miniature dei post
2. displaymore: per mostrare il link Leggi… che può anche essere sostituito da un'altra espressione
3. displayseparator: per mostrare una linea di separazione tra ciascun elemento
4. showcommentnum: per mostrare i commenti ricevuti
5. showpostdate: per mostrare la data dell'articolo
6. showpostsummary: per mostrare la parte iniziale del post

Dopo aver salvato il widget si posiziona con il mouse. Ho anche pubblicato una Demo degli Ultimi Articoli con MIniature.

Aggiornamento: Ho aggiunto la riga list-style:none; per non mostrare il puntino dell'elenco numerato a fianco della miniatura.