Come installare il widget orizzontale delle miniature degli Ultimi Articoli in Blogger.

Come installare il widget orizzontale delle miniature degli articoli recenti su Blogger personalizzabile nelle dimensioni.

A seguito di un commento ricevuto pochi minuti fa riprendo un gadget che ebbe grande successo diversi anni fa e che non mi ricordo di aver riproposto. Il widget in questione mostrerà sopra l'area del post a tutta pagina le miniature degli Ultimi Articoli con relativi titoli e link.

Le miniature mostrate saranno quelle delle immagini pubblicate nei post prima dell'Intervallo o Read More o Jump che dir si voglia. Se siete abituati come me a non pubblicare mai immagini prima del Read More allora le miniature non sarebbero visualizzate. Il problema si può però facilmente risolvere mostrando una serie di immagini di default sostitutive. Il widget può essere personalizzato nella sua larghezza e nelle dimensioni delle miniature. Il suo aspetto è il seguente

 

L'installazione non presenta difficoltà visto che non occorre neppure modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla il codice

<table style="background-color: #ffffff;">
<tr>
<td style="margin-left: 20px; margin-top: 10px;" align="left"><script language="JavaScript">
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
tablewidth = 900;
cellspacing = 7;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 113;
imgheight = 100;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";
numposts =6;
home_page = "http://www.ideepercomputeredinternet.com/";
</script>
<script type="text/javascript">
function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
        }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}
function showrecentposts(json) {
    document.write('<table width="'+tablewidth+'" border=0 bordercolor="#FF0000" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'" align="left">');
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
      for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }       
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }       
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";       
        postdate = entry.published.$t;   
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];   
    s = postcontent    ; 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[i] = d;
    cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }
    var daystr = (showPostDate) ? '<i><font color="'+acolor+'">('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
    var td = '<td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><br /><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> ' + daystr + '<div style="color:'+summaryColor+'; margin-top:2px; border-top:1px '+borderColor+' solid; font-size:'+summaryFontsize+'px;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</div></td>';
    if(summaryPost == 0) { td = '<td align="left" valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><br />'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>' + daystr + '</td>'; }
    document.write(td);
    j++;
}
document.write('</tr></table>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</td>
</tr>
</table>

Si salva e con il trascinamento del mouse si posiziona sopra all'area del post in questo modo

Si va poi in alto su Salva Disposizione. Le personalizzazioni più rilevanti sono:

1. Va sostituito l'URL di questo blog con quello del vostro con il .com e non con il .it localizzato.
2. Gli URL del tipo http://tinyurl.com/oj827g rappresentano le immagini di default. Possono essere sostituiti da altri URL di immagini precedentemente caricate su Picasa. 
3. #ffffff nella prima riga è il colore di background della tabella in cui sono inserite le miniature
4. 900 è la larghezza del widget che dovrà essere uguale o inferiore a quella del vostro sito
5. 113 e 100 sono rispettivamente la larghezza e l'altezza delle singole miniature e sono nella proporzione 4:3 che è il rapporto più usato nelle foto.
6. 7 sono i pixel di spazio tra una miniatura e l'altra (cellspacing)
7. 6 è il numero delle miniature e quindi dei post visualizzati.
8. #ffffff è il colore del bordo delle miniature in questo caso scelto trasparente
9. fntsize = 12; è la dimensione dei caratteri del titolo
10. aBold = true; serve per attivare il grassetto nei titoli.

Demo
Clicca qui