domenica 10 agosto 2008

Aggiungere una Tag Cloud in Blogger

Le Tag Cloud, o Label Cloud, sono sempre più presenti su siti web e blog e sono uno dei tratti di design caratterizzanti l'esperienza del Web 2.0.
Sulla reale utilità nella navigazione ci sono opinioni contrastanti, di certo offrono una vista "pesata" dei contenuti che può aiutare l'utente a capire dov'è finito.

Ecco un esempio per capire di cosa stiamo parlando.


Per aggiungere una tag cloud al nostro blog su Blogger abbiamo (almeno) due opzioni: la prima è più semplice (c'è meno codice da copiare e incollare) ma è anche molto meno flessibile, sopratutto nel caso si abbiano categorie con molti post.
La seconda comporta un'aggiunta maggiore di codice ma è molto più "smart", ed è anche quella che preferisco.

Vediamole in dettaglio.

1) il metodo Banana Stew

Andiamo in Layout -> Modifica HTML e per prima cosa scarichiamo il nostro template per averne una copia di sicurezza. Questo vale anche per entrambe le soluzioni.
Spuntiamo la casella "Espandi i modelli widget" e modifichiamo il css aggiungendo questa porzione di codice immediatamente prima del marcatore
]]></b:skin>


/* Modifica di Banana Stew per Tag Cloud
----------------------------------------------- */
.common-link-1 {font-size:85%;}
.common-link-2 {font-size:86%;}
.common-link-3 {font-size:87%;}
.common-link-4 {font-size:88%;}
.common-link-5 {font-size:89%;}
.common-link-6 {font-size:90%;}
.common-link-7 {font-size:91%;}
.common-link-8 {font-size:92%;}
.common-link-9 {font-size:93%;}
.common-link-10 {font-size:94%;}
.common-link-11 {font-size:95%;}
.common-link-12 {font-size:96%;}
.common-link-13 {font-size:97%;}
.common-link-14 {font-size:98%;}
.common-link-15 {font-size:99%;}
.common-link-16 {font-size:100%;}
Ora sostituiamo le righe comprese tra
<b:loop values='data:labels' var='label'>
....
</b:loop>
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/>(<data:label.count/>)</a>
</b:if>
</span>
</b:loop>
Salviamo e verifichiamo che tutto sia a posto.

Il grosso limite di questo hack è che definiamo uno stile per ciascun numero di post, se abbiamo 50 post nella categoria Template dobbiamo definire uno stile ad hoc e dobbiamo definirne un altro quando questi diventeranno 51.
Scomodo.

2) il metodo Phydeaux

Questo è decisamente più furbo. Vediamo le modifiche da apportare al template.
In questo caso non espandiamo i modelli widget e sempre prima della riga con
]]></b:skin>
copiare il codice
/* Modifica di Pydeaux per Tag Cloud
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;
vertical-align
:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Ora aggiungiamo questa volta DOPO
]]></b:skin>
ma PRIMA del tag di chiusura </head> questo codice
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Ancora una piccola modifica e avremo finito, cerchiamo la stringa
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Selezioniamola e copiamoci sopra questo codice (è importante non espandere i modelli widget!)
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<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>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
Salviamo le modifiche e, se siamo stati sufficientemente attenti, dovremmo vedere la nostra bella nuvola di etichette.

4 commenti:

Chiara Zocchi ha detto...

Ciao,
ho provato a sewguire la procedura ma senza successo.
Uso blogspot e mentre prima dell'operazione avevo la sezione "etichette" con l'elenco delle parole chiave, adesso mi compare la scritta "label cloud" ma sono scomparse le parole che prima erano associate!

hipst3r ha detto...

Ti consiglio di ripristinare il layout originale (quello salvato prima delle modifiche) e di riprovare a seguire la procedura.

Fammi sapere.

Unknown ha detto...

ho un problema perché non esiste la riga

hipst3r ha detto...

Qual è la riga che non esiste?

Clicky Web Analytics