Tagcloud con la nuova versione di Blogger 13/07/07

Ancora un totorial dedicato a Blogger, questa volta si tratta di realizzare una tagcloud (o label-cloud) con la nuova versione ex-beta. Per farlo abbiamo bisogno solo di modificare alcuni parametri del nostro HTML ed aggiungere alcune classi CSS...

» continua

L' esempio che vi segnalo lo trovate qui (nella versione originale), ho modificato giusto due parametri e il foglio di stile, ma vediamo come fare.

La prima cosa da fare è trovare la parte di codice relativa alle label/etichette; entrate nella modifica dell' HTML nel pannello di controllo e spuntate espandi widget. Ora scorrete la pagina fino a trovare il seguente codice (che dovrete modificare):

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

Quindi sostituite tutto il codice (da <ul> a </ul>) 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>


Abbiamo aggiunto solo alcune condizioni; in questo esempio ho tolto il conto dei post per etichetta, ma potete anche inserirli modificando le ultime quattro righe, in questo modo:

<a expr:href='data:label.url'><data:label.name/>(<data:label.count/>)</a>
</b:if>
</span>
</b:loop>


Ci restano da inserire le classi CSS; è molto importante considerare che (e questo è un piccolo limite di questo hack) dovremmo inserire una classe per ogni valore; in pratica se abbiamo 50 post in un' etichetta dovremmo inserire 50 classi... non vi preoccupate, è più semplice del previsto, questo è il codice CSS da aggiungere al nostro stile:

.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%;}

Bene, è tutto(in questo caso arrivate a 20 post per categoria, vi basterà aggiungere ulteriori classi a seconda delle vostre esigenze); esistono altri metodi per visualizzare la tagcloud con il nuovo Blogger, ma questo è sicuramente il più semplice, buon divertimento...