Come personalizzare il widget dei post più popolari in Blogger.

Le personalizzazioni offerte dal servizio sono ancora minime e non sempre ben funzionanti.

Vediamo come ovviare a un paio di queste manchevolezze, ricordando che il widget si basa su un elenco e su delle miniature, quindi il suo aspetto dipenderà dallo stile che il nostro modello ha per questi due elementi.

1.- Come diminuire il numero dei post più popolari visualizzati.

Uno dei problemi maggiori è che di default vengono mostrati i dieci post più visti e non c'è data possibilità di modificare questo numero. Ecco come si può ovviare a questo inconveniente. Il trucco è quello di modificare la lunghezza del widget con il vincolo di non mostrare la parte eccedente. Occorre andare in Design > Modifica HTML e cercare la seguente riga:

cliccando su F3 o su Ctrl+F. Immediatamente sopra deve essere incollato il seguente codice

dove la prima riga è un commento che serve per ritrovare il codice per eventuali future modifiche e il parametro da modificare è height: 420px; cercando l'altezza giusta per mostrare solo il numero dei post che desideriamo. Ovviamente va salvato il modello.

2.- Come modificare l'aspetto del widget.

Sempre su Design > Modifica HTML possiamo visualizzare quello che è il codice standard per il widget

che può variare a seconda che abbiamo optato per la presenza o meno di miniature e snippet. Il codice, come quello di tutti i gadget inizia con <b:widget id=... e termina con </b:widget>. Una possibile personalizzazione è quella di cancellare totalmente tutto questo codice e di sostituirlo con quest'altro

Le parti evidenziate di rosso possono essere personalizzate e riguardano principalmente l'immagine che dovremo mostrare come miniatura se nel post non ce ne fosse nessuna. Una tale immagine deve essere caricata su un servizio tipo Picasa o Skydrive.

Adesso cerchiamo la riga
]]></b:skin>
e, immediatamente sopra, incolliamo il CSS del widget

/* Post Popolari Stile */
#PopularPosts1 li{
list-style:none;
width:300px;
height: 70px;
border-bottom: 1px solid #111;
margin: 5px ;
padding: 0 0 15px 0;
}
.item-thumbnail {
padding: 5px;
}
.item-title {
padding: 30px 0;
font-size: 14px;
}

Le parti in rosso indicano tutto quello che si può personalizzare e riguardano

1. La larghezza del widget (width:300px;) e l'altezza di ogni singolo elemento dell'elenco (height: 70px;)

2. La larghezza del bordo (1px), la sua forma (solid o dashed o dotted) e il suo colore (#111)

3. La dimensione dei caratteri del titolo del post (14px)

4. Si possono anche modificare i valori del margin (distanza tra il widget e il resto del layout) e del padding (distanza tra l'esterno del widget e il suo contenuto interno)

5. La dimensione della miniatura deve essere coerente con l'altezza che si è impostata per ogni singolo elemento dell'elenco

Ecco un esempio di come può diventare il widget con queste modifiche

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog: