07 maggio, 2009

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!!
vac 468x60.gif

6 commenti:

phoebe on 10 maggio 2009 21:51 ha detto...

ciao, era da un pò che cercavo una soluzione ideale.. potrei metterlo anche in fondo al blog!?

Equifare Fare Equitazione on 11 maggio 2009 09:48 ha detto...

Grazie Yuri! Era quello che volevo, come disse qualcuno: chiedi ed avrai, così è con te!
A phoebe dico: secondo me dipende da dove usi la funzione aggiungi gadget. Prova ad aggiungere prima l'etichette classico di blogger in fondo al tuo blog e poi a fare la modifica che ti ha consigliato Yuri.

phoebe on 11 maggio 2009 23:56 ha detto...

Come disse Muchacha :)..fatto!!!
l'unica non riesco ad evidenziarle.. Ma con calma le sistemo.:):)

yurj on 25 maggio 2009 23:20 ha detto...

#phobe: l'evidenziatura del link è fatta attraverso i css

aristide on 3 giugno 2009 15:53 ha detto...

ma a me come al solito non viene. quando faccio modifica html poi devo per forza salvare? se faccio anteprima non funziona?

Sabrina on 4 giugno 2009 15:52 ha detto...

io ho un paio di etichette che in pratica compaiono in quasi tutti i post, quindi dovrei aggiungere righe fino a un valore di 130... non c'è un modo per dirgli ad esempio "oltre le 30 aumenta del 140%"? ...non so se sono stata chiara... GRAZIE

 
Ti sono stato utile? Ti ho aiutato? Ho risolto qualche tuo problema? Allora che ne dici di offrirmi un caffe?;)

Lettori fissi

Risorse per blogger Copyright © 2009 FreshBrown is Designed by Simran