Blogger, Widget per inserire un menù con gli articoli recenti con anteprima d'immagine



Vogliamo mettere in risalto i nostri articoli più recenti? 
Proviamo ad inserire un utile elemento che che lo faccia inserendo anche, se nell'articolo è presente, un'immagine di anteprima.
Il risultato è lo stesso di quello che puoi osservare qui alla tua destra. Un gadget molto carino e utilissimo. Per inserirlo nel tuo layout non ti resta che copiare il codice seguente e incollarlo in un gadjet HTML/Javascript all'interno del tuo blog blogger.

CODICE DA COPIARE:

<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";
showRandomImg = true;
boxwidth = 280;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 80;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "commenti";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 6;
home_page = "http://www.segretipc.com/";
</script>
<script src="http://demk.altervista.org/File/Script/recentposts_thumbnail_1_.js" type="text/javascript"></script>

La prima modifica da fare è sostituire l'url in rosso col quello del vostro blog.
Vediamo assieme le possibili modifiche:

- Possiamo cambiare l'immagine di default da pubblicare in caso di assenza nell'articolo.
Di default l'immagine è  http://i43.tinypic.com/orpg0m.jpg e basta sostituire nel terzo rigo (dove ci indica imgr[0]) l'url di una nostra immagine magari con grandezza 80x60;

- Possiamo decidere il numero di articoli da visualizzare. Bisogna modificare il valore di default 6 alla riga "numposts = 6;" e inserendo tanti elementi "imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; " in base alle nostre necessità.

- Possiamo modificare la larghezza in pixel del gadget modificando il valore della riga "boxwidth = 280;" dove 280 è in pixel;

- Possiamo modificare il colore del bordo del gadget modificando il valore di default esadecimale #fffff (nero) alla riga "borderColor = "#ffffff";" ti può aiutare la tavola colori esadecimali;

- Possiamo modificare la grandezza dell'immagine d'anteprima modificando rispettivamente le righe "thumbwidth = 80;" per la larghezza e "thumbheight = 60;" per l'altezza di default 80x60 che sono valori in pixel;

- Possiamo modificare la grandezza del testo modificando il valore di defaul 12 alla riga "fntsize = 12;";

- Possiamo modificare il colore del titolo dell'intervento modificando il valore esadecimale #666 alla riga "acolor = "#666";", ti può aiutare la tavola colori esadecimali;

- Possiamo decidere se inserire il titolo in grassetto oppure no modificando il valore alla riga "aBold = true;" dove true sta per grassetto e false per il testo senza grassetto;

- Possiamo decidere se inserire la data in cui è stato pubblicato l'intervento modificando la riga "howPostDate = false;"  inserendo i valori true per mostrare la data e false per non mostrarla;

- Possiamo scegliere quanti caratteri di testo usare nel sommario dell'articolo. Bisogna modificare la riga "summaryPost = 40;", se inseriamo 0 avremo solo i titoli degli articoli;

- Possiamo modificare la grandezza del testo usato nel sommario modificando la scritta "summaryFontsize = 10;" ;

- Possiamo modificare il colore del testo del sommario modificando il valore esadecimale #666 alla riga "summaryColor = "#666";" inserendo il valore preferito. Ti può essere d'aiuto la tavola colori esadecimali;


Fonte script: Blogger Tricks

Potete sfiziarvi nel modificare il gadget come preferite ^^, mi raccomando però di non cambiare l'ultimo Url altrimenti non potrà funzionare.




Grazie per il commento