Articoli recenti con immagine d'anteprima | Recent post with thumbnails widget for blogger

Tempo fa abbiamo spiegato come inserire uno script che pubblica gli articoli recenti in maniera automatica sfruttando i feeds: Aggiunta di un widjet per gli articoli recenti. Sullo stesso stile adesso proviamo ad inserire un utile elemento che metta in risalto gli articoli recenti inserendo anche, se nell'articolo è presente, un'immagine di anteprima.
Il risultato è lo stesso di quello che puoi osservare qui alla tua sinistra. Un gadjet 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 = 260;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "commenti";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://imaniaci.blogspot.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 l'url di una nostra immagine magari con grandezza 40x40;

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

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

- Possiamo modificare il colore del bordo del gadjet 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 = 40;" per la larghezza e "thumbheight = 40;" per l'altezza di default 40x40 dove 40 è 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;

Al momento non mi vengono in mente altre possibili modifiche.
Fonte script: Blogger Tricks

Trovo il gadjet accattivante per i nostri utenti che spinti dalle immagini possono essere portati a visualizzare l'elemento e magari a visitare gli ultimi articoli pubblicati....



ARTICOLI RECENTI

• Utili consigli per blog e msn
• Guide per Blogger
• Come inserire articoli correlati senza immagini d'anteprima
• Come inserire gli articoli correlati
• Come sapere chi vista il tuo space o blog
• Immagine utenti online
• Controlla la grafica del blog visto da browser diversi
• Bottone Collegamento Profilo Facebook per Blog

SHARE SHARE SHARE

Clo&demk

Siamo due semplici ragazzi Clo e Demk abitiamo in diverse città, ma il PC e gli interessi comuni ci legano. Ci piace la musica e i video musicali, navigare nel vasto mare d'informazioni d'internet alla ricerca di nuove mete diverse e lontane e non ci spaventano gli ostacoli...(Continua).

• 
• 
• 
• 
•