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:

]]></b:skin>

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

/* Post Popolari */
#PopularPosts1 {
height: 420px;
overflow: hidden;
}

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

<b:widget id='PopularPosts1' locked='false' title='Post più popolari' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail-center'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b: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

<b:widget id='PopularPosts1' locked='false' title='Articoli più letti' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img src='http://t9pysw.blu.livefilestore.com/y1pyDV2pEY18AF2Mp8eieGrghWSLgB1udVJJq3fNps6_-t5NcEqMOQQ51e8TM2v0-DPEi5eXJypDjrqC46urd98E2e9apZHo9NG/miniatura-90.jpg'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

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

La larghezza del widget (width:300px;) e l'altezza di ogni singolo elemento dell'elenco (height: 70px;)
La larghezza del bordo (1px), la sua forma (solid o dashed o dotted) e il suo colore (#111)
La dimensione dei caratteri del titolo del post (14px)
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)
La dimensione della miniatura deve essere coerente con l'altezza che si è impostata per ogni singolo elemento dell'elenco