Post Recenti con icona anteprima per Blogger

In questa guida vi mostrerò come inserire un widget che visualizza i Post Recenti con a fianco una miniatura corrispondente alla prima immagine che avete pubblicato nel post.

Ecco un esempio di cosa otterrete:

Come si vede dall'esempio, questo widget visualizza automaticamente gli ultimi 5 post presenti sul vostro Blog Blogger, e genera automaticamente l'anteprima delle immagini contenute in ciascun post. Inoltre è presente il conteggio del numero di commenti presenti su ciascun post.



Il widget è stato creato dall'autore di BloggerTricks.com sul cui blog troverete le spiegazioni in inglese.

Installazione del Widget Post Recenti con immagine

Assicuriamoci di aver abilitato i feed Rss per il nostro Blog e di averli impostati in modo da rendere disponibile gli interi post (non una anteprima). Per fare ciò andiamo in Impostazioni -> Feed Sito e selezioniamo Consenti Feed Blog -> Completo.

Passiamo all'installazione del widget.

1: Andiamo in Layout -> Aggiungi Gadget -> Html/Javascript

2: Copiamo e incolliamo il codice seguente

<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 = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NOMEBLOG.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

3: Prima di salvare passiamo alla configurazione del widget per adattarlo al nostro blog.

Configurazione del Widget

Di seguito la lista dei parametri da modificare. Quelli di default vanno abbastanza bene, l'unica cosa che dovete necessariamente modificare è il parametro home_page, inserendo l'indirizzo del vostro Blog.

boxwidth - larghezza del widget

cellspacing - spaziatura tra le celle

borderColor - Colore del bordo

thumbwidth & thumbheight - larghezza e altezza delle immagini visualizzate

fntsize - Larghezza del carattere

acolor - Colore del titolo

aBold - grassetto nel titolo (true o false)

numposts - Quanti post vuoi mostrare

home_page : http://NOMEBLOG.blogspot.com/ (cambialo con il nome del tuo blog)


Se avete post che non contengono immagini al loro interno, verrà visualizzata una immagine casuale (se volete personalizzarle basta inserirle tra quelle specificate in imgr[]).

Share |

9 Commenti:

paomablog ha detto...

Widget molto carino sei un grande complimenti !!!
subito inserito nel mio blog perfettamente funzionante CIAO

sogno93 ha detto...

questo gagdet mi piace moltissimo !!! sei proprio forte!!! l'ho inserito nel mio blog..mi piace!!!!!!!!!!!!!!

Carlitos ha detto...

io l'ho inserito ma non mi da l'anteprima delle immagini dei post.. sbaglio kualcosa?

Jack Slater ha detto...

Carlitos, controlla questa impostazione: Consenti Feed Blog -> Completo

learn html online ha detto...

non ho altre da dire che sei un esperto di blogger

iohounaidea ha detto...

Interessante grazie!!!

Ivan ha detto...

bella questa! solo ke impegna un po di piu per carricarsi...mha...cmq carrina

Matteo ha detto...

Ciao.. Come hai fatto ad inserire quella barretta per condividere i post?!?! Quella con scritta "Share is sexy" mi piacerebbe inserirbla anche nel mio blog.. Grazie ;)

win for life/grande fratello ha detto...

Salve, Mi chiamo Masimo, non so se ti farà piacere, io ho messo nel mio blog, www.gf-10.net, un link al tuo sito,in quanto dal tuo sito ho preso molte informazioni utili...Complimenti...saluti Max

Potrebbe interessarti anche:

Blog Widget by LinkWithin