martedì 8 settembre 2009

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:

Blogger: widget dei post recenti con thumbnail

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":
  5. <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>
  6. Modificare l'URL in rosso con quello del proprio blog
  7. 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";

4 commenti:

# - 08/09/09, 16:17

Stefania ha detto...

Bello e utilissimo: l'ho aggiunto al mio blog.
Ciao
Stefania

# - 10/09/09, 11:00

Pietro ha detto...

non mi fa vedere le immagini

# - 10/09/09, 20:05

Giuseppe ha detto...

@Stefania, grazie :-)
Ho visto il widget sul tuo blog, è venuto proprio bene ;-)

@Pietro, devi sistemare il tuo feed RSS perché non ha le immagini che invece servono per fare funzionare questo widget ;-)

# - 26/11/09, 15:05

Giuseppe ha detto...

ciao, ho installato il widget, vorrei fare in modo da allineare l' immagine a sinistra ed il testo attori, è possibile?
OT
Ho notato che ne widget di blogger c'è la funzione simile a questa, anche più carina, l' unica pecca è che quando vado a cliccare sull' articolo, non mi compaiono gli annunci adsense, se aggiorno la pagina con lo stesso link compaiono
Bhoooooo


Ti è piaciuto questo post? Allora cosa aspetti, iscriviti al feed RSS
Scopri cosa sono i feed RSS e migliora il tuo modo di navigare.

Posta un commento