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 StewAndiamo 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 PhydeauxQuesto è 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>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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.
