Inserire una label-cloud in Blogger.

Questo post si basa su un lavoro di phydeaux3 ed è la traduzione dall'inglese di questo "leggendario" post che risale al settembre 2006 ed ha ricevuto la bellezza di 556 commenti entusiasti. Cominciamo ad entrare nel blog in Layout quindi in Aggiungi Elemento pagina quindi scegliete l'elemento Etichette e posizionatelo dove volete. Il risultato è brutto perché viene un elenco a discesa decisamente antiestetico e per nulla funzionale. Il tutto è mostrato in questi screenshotSalvare il tutto e andare su Modifica Html quindi senza espandere i modelli widget cercare questa linea di codice

]]></b:skin>

ed immediatamente prima inserire questo codice

/* Label Cloud Styles
----------------------------------------------- */
#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}

quindi immediatamente dopo di
]]></b:skin>
ma prima del codice
</head>
inserire quest'altro 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>

Salvare il modello ed espandere i modelli widget mettendo il segno di spunta, quindi cercare questa riga di codice

<b:widget id='Label1' locked='false' title='Etichette' type='Label'/>

Selezioniamo e cancelliamo tutto il codice da questa linea fino alla linea che chiude il widget cioè fino alla linea

</b:widget>

Quindi al posto del codice cancellato incolliamo quest'altro codice

<b:widget id='Label1' locked='false' title='ETICHETTE' 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>e
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>



Salviamo nuovamente il modello e visualizziamo il blog. Se avete seguito il procedimento dovrebbe apparire la vostra "nuvoletta di etichette" che può essere personalizzata a seconda della forma e dei colori del vostro modello. Vediamo come:

• andando sul secondo codice immesso troviamo la riga var cloudMin = 1; questo è il numero minimo di occorrenze per un'etichetta per essere visualizzata, cambiando 1 con 2 avrete una "nuvola" molto più compatta.
• sempre nella stessa parte di codice maxFontSize e minFontSize rappresentano, in pixel, la grandezza massima dell'etichetta
• possiamo inoltre cambiare colore considerando che è rappresentato in formato RGB. In sostanza minColor è il colore delle etichette più piccole, in questo caso RGB =[0,0,0] cioè sono di colore nero, mentre maxColor è il colore delle etichette più grandi, in questo caso RGB=[0,0,255] che sono i numeri che definiscono il colore blu.
• per una spiegazione su come impostare IcShowCount e la sezione CSS vi rimando al post originale.
• se vuoi personalizzare il titolo del widget lo puoi fare in un secondo momento. Al posto di ETICHETTE ho messo "Clicca sull'etichetta per visualizzare i post corrispondenti".
  

A cosa serve questo widget? Provate a cliccare su un'etichetta e vi si apriranno tutti i post che la contengono; inoltre i visitatori del vostro blog avranno già dalla Home una visione totale di tutti gli argomenti che avete trattato. L'obbiettivo è sempre lo stesso far rimanere i visitatori più a lungo possibile!