Fare una tagcloud con le etichette di blogger

Il gadget delle etichette di blogger, secondo me, è molto utile, ma ha un piccolo difetto, graficamente non è proprio il massimo...

Non so voi, ma io preferisco le etichette sotto forma di tagcloud, dove i termini più utilizzati risaltano maggiormente a discapito di quelli meno utilizzati.

Bene, con la modifica di oggi, andremo proprio a creare una tagcloud in questo stile:



Mettiamo immediatamente al lavoro.

Per prima cosa attiva il gadget delle etichette, poi dalla bacheca di blogger, vai su layout/modifica html e metti una spunta in "Espandi i modelli widget"

Cerca questa linea di codice:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

E sostituiscila con questo:

<b:loop values='data:labels' var='label'>
<span expr:class='"common-link-" +
data:label.count'>
<b:if cond='data:blog.url == data:label.url'> (<data:label.count/>)
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</span>
</b:loop>

In questo caso, i numeri delle etichette non compaiono, mentre se li vuoi, devi, invece, sostituirlo con questo codice:

<b:loop values='data:labels' var='label'>
<span expr:class='"common-link-" +
data:label.count'>
<b:if cond='data:blog.url == data:label.url'> (<data:label.count/>)
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</span>
</b:loop>

Adesso, non ti resta che personalizzare il gadget attraverso i CSS.

Sempre dalla pagina "modifica html", cerca questa riga (o qualcosa di simile, l'importante è che sia all'interno del foglio css):

/* Sidebar Content
----------------------------------------------- */

e aggiungi questo:

.common-link-1, .common-link-2, .common-link-3 ,.common-link-4, .common-link-5 {font-size:90%;}
.common-link-6, .common-link-7, .common-link-8 ,.common-link-9, .common-link-10 {font-size:100%;}
.common-link-11, .common-link-12, .common-link-13 ,.common-link-14, .common-link-15 {font-size:110%;}
.common-link-16, .common-link-17, .common-link-18 ,.common-link-19, .common-link-20 {font-size:120%;}

E salva il tutto.
Se hai difficoltà ad inserire i css, ti ho preparato un piccolo screenshot:



Personalizzare la tagcloud
Per i più smanettoni, modificando qualche variabile dei css, la tagcloud può essere ulteriormente personalizzata, per esempio questa riga:

.common-link-1, .common-link-2, .common-link-3 ,.common-link-4, .common-link-5 {font-size:90%;}

Dice che le etichette ripetute 1, 2, 3, 4, 5 volte devono avere un carattere più piccolo del 10% (100% - 90%) rispetto a quello standard (100%). Quindi, per esempio, se vuoi che le etichette ripetute per almeno 6 volte, siano più piccole della metà rispetto a quello standard dovrai scrivere così (in blu le modifiche):

.common-link-1, .common-link-2, .common-link-3 ,.common-link-4, .common-link-5, .common-link-6 {font-size:50%;}

Nota bene.
Questa modifica, prende in considerazione le etichette ripetute massimo 20 volte, se il tuo blog ne contiene di più dovrai semplicemente aggiungere una riga al codice dei css di sopra indicato, in questo modo:

.common-link-21, .common-link-22, .common-link-23 ,.common-link-24, .common-link-25 {font-size:130%;}

E così via!!

Buon divertimento!!