Blogger: widget dei post recenti con thumbnail

Oggi vedremo come aggiungere in Blogger un widget dei post recenti con thumbnail, il risultato sarà simile a questo:

Il widget, dunque, riporta gli ultimi post e per ognuno di essi una thumbnail e il numero dei commenti ricevuti. Ogni thumbnail del widget è la miniatura della prima immagine presente all'interno del rispettivo post.

Installazione

1. Accedere a Layout->Elementi pagina e premere su "Aggiungi un gadget"
2. Scegliere il gadget di tipo "HTML/JavaScript"
3. Assegnare nella textbox "Titolo" un nome al gadget (Titolo può anche essere lasciato vuoto)
4. Copiare e incollare il seguente codice nella textbox "Sezioni del sito":

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

home_page = "http://web-login.blogspot.com/";

numposts = 5;
boxwidth = 298;
borderColor = "#ffffff";
fntsize = 12;
acolor = "#666";
aBold = true;
cellspacing = 8;

bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
text = "commenti";

showRandomImg = true;
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon = " ";
icon2 = " ";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

5. Modificare l'URL in rosso con quello del proprio blog
6. Salvare le modifiche premendo il bottone "Salva".

Configurazione

Infine, dopo avere installato il widget bisogna configurarlo in modo da adattarlo al proprio blog. I parametri da modificare (ci sono anche altri paramenti, come le dimensioni delle miniature oppure lo spazio tra i vari elementi del widget, ma elenco solo quelli sufficienti per l'installazione) sono i seguenti:

numposts = numero di post nel widget (5 è il valore di default);

boxwidth = larghezza del widget (298 è il valore di default);

borderColor = sfondo del widget (bianco è il colore di default);

fntsize = dimensione del font del titolo;

acolor = colore del titolo;

aBold = "true" per il titolo in grassetto, in caso contrario "false";

[via Blogger Ttricks]