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

Personalizzazione del widget dei Post più popolari di Blogger riguardo alla dimensione delle miniature, larghezza e altezza del gadget.

Il widget dei Post più popolari ha da pochi giorni fatto la sua comparsa in Blogger e può essere inserito attraverso la Bacheca di Blogger in Draft. Le personalizzazioni offerte dal servizio sono ancora minime e non sempre ben funzionanti visto che si tratta ancora di un gadget sperimentale. 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.

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.

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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<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 == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<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/>
<!-- (4) Show snippets and thumbnails -->
<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

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

Si vede la stessa miniatura in tutti i post perché per il test ho utilizzato il mio blog di prova nel quale non ci sono immagini. Se le modifiche non ci soddisfano si può sempre eliminare il widget e reinstallarlo per ritornare alla situazione di partenza. Dovranno anche essere tolte le righe di codice inserite sopra a ]]></b:skin>.

Aggiornamento: Ho inserito la riga list-style:none; per non mostrare il puntino dell'elenco accanto alle miniature.