Come inserire delle icone personalizzate per ciascuna categoria in un blog su Blogger.

Alcuni blog su Blogger vengono divisi in sezioni utilizzando delle etichette principali da aggiungere a quelle secondarie. Per esempio un blog sul mondo dello spettacolo può decidere di raggruppare gli articoli secondo gli argomenti: cinema, musica, televisione, gossip, ecc.
Nel momento in cui si scrive un post, insieme ai tag specifici per l'articolo, viene inserita anche l'etichetta corrispondente alla sezione. Per esempio un articolo con il titolo "Tragedia sfiorata all'Isola dei Famosi per un tuffo dall'elicottero con l'acqua bassa" avrà le etichette: isola dei famosi, reality, elicottero, televisione. Dove l'ultima in grassetto sarà la categoria principale.
Se si utilizza un sistema di pubblicazione di questo tipo può essere utile inserire il widget per gli ultimi articoli per categoria senza miniature o con miniature.
Un'ulteriore personalizzazione può essere quella di inserire delle icone personalizzate sotto il titolo in modo da informare immediatamente i lettori a quale categoria il post appartenga. Come sempre è più facile a vedere un esempio che a spiegarlo. Recatevi quindi nel mio blog di demo e guardate gli articoli pubblicati il 6 Marzo.


Oltre alle icone con il numero dei commenti sono presenti per ogni post delle immagini che indicano di quale argomento tratta l'articolo. La personalizzazione è piuttosto semplice. Andare come al solito su Layout > Modifica HTML e salvare il modello completo. Dobbiamo incollare il codice seguente, dirò dopo in quale punto

<!--ICONE START-->
<div style='text-align: right'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;musica&quot;'>
<img alt='musica' src='http://goo.gl/bAgg'/>
</b:if>
<b:if cond='data:label.name == &quot;cinema&quot;'>
<img alt='cinema' src='http://goo.gl/B987'/>
</b:if>
<b:if cond='data:label.name == &quot;televisione&quot;'>
<img alt='televisione' src='http://goo.gl/R1bn'/>
</b:if>
<b:if cond='data:label.name == &quot;computer&quot;'>
<img alt='computer' src='http://goo.gl/QW1G'/>
</b:if>
</b:loop>
</div>
<!--ICONE STOP - http://parsifal32.blogspot.com/-->

Ho inserito quattro categorie con le relative icone ma possono essere aggiunte tutte le categorie che si vuole con i nomi che si desidera e con le icone che si preferisce. E' sufficiente aggiungere nuovi blocchi di codice con la stessa sintassi. Vediamo le personalizzazioni

1. Se al posto di right inseriamo left le icone si vedranno sulla sinistra invece che sulla destra
2. Le quattro categorie che ho inserito (musica, cinema, televisione, computer) possono essere aumentate o sostituite da altre modificando il nome evidenziato di rosso
3. Accanto a ciascuna categoria c'è l'URL dell'icona corrispondente (p.e. http://goo.gl/bAgg). Se si vogliono altre icone si devono caricare su un servizio tipo Skydrive, acquisirne l'URL e sostituirlo a quelli del codice
4. Se volete trovare icone per qualsiasi esigenza consultate il motore IconFinder ricordandovi di immettere le parole chiave in inglese. Le icone possono anche essere ridimensionate a  seconda delle esigenze e del modello.
5. Da notare che se sono presenti due o più etichette, si visualizzeranno due o più icone

La posizione di inserimento del codice dipende dal modello che avete e se il vostro blog ha la pubblicità di Adsense o meno. Vi suggerisco quattro possibilità
1): Immediatamente sotto alla riga

<div class='post-header-line-1'/>

può essere una buona soluzione se non avete pubblicità.
2): Immediatamente dopo il codice della pubblicità che si visualizza sotto il titolo del post 
3): Immediatamente sopra alla riga

<div class='post-body entry-content'>

4): Immediatamente sopra alla riga

<data:post.body/>

La scelta ottimale dipende anche da altre personalizzazioni che avete già inserito che possono andare a interferire con questa. Parlo di interferenza estetica e non a livello di incompatibilità che dovrebbe essere assicurata per tutti i modelli.