Blogger Hack: Trasformare le etichette in stile label-cloud

Vediamo come possiamo inserire una "label-cloud" ovvero "nuvola di etichette" come su wordpress o altri siti web 2.0
Nella vostra sidebar potete comunque visualizzare anche le etichette normali di blogger, basta aggiungerne una nuova, infatti noi modificheremo solo la "label1".

Iniziamo!
Andiamo sempre in Layout--->modifica html.
Salvate la solita copia di emergenza del vostro modello
Espandete i modelli widget e cercate questa linea di codice:

]]></b:skin>

Subito prima inserite 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}

e subito dopo di ></b:skin> questo:

<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>

Ora cerchiamo questa riga di codice:

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

cancellatela insieme a tutto il codice seguente fino a trovare la chiusura del widget cioè:

</b:widget>

Ora, al posto del codice cancellato, inseriamo questo 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>

A questo punto abbiamo finito, provate a visualizzare l'anteprima se tutto va bene e poi salvate.

Personalizzazioni:
In questa parte del codice è possibile personalizzare alcuni parametri:

<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>

Con cloudMIn è possibile impostare il numero minimo di occorrenze per un'etichetta per essere visualizzata, cambiando 1 con 2 avrete una "nuvola" molto più compatta.
Con maxFontSize e minFontSize è possibile impostare rispettivamente il valore dell'altezza del font maggiore e minore dell'etichetta.
Con minColor e maxColor si può impostare il colore in RGB dell'etichetta che contiene meno occorrenze e quella con più occorrenze. Di default va dal nero al blu
Infine con IcShowCount è possibile visualizzare o meno i numero delle occorrenze accanto all'etichetta, di default è "false", per abilitarlo cambiare in "true"


Fonte: Fai.informazione