Installazione e configurazione per la Blogger Tag Cloud / Etichette Cloud

Ecco il tanto atteso post su come trasformare le nostre etichette in tag could, in base al numero di posts presenti con quella etichetta il tag diventa più grande e di colore diverso.
Questo codice funziona con gli ormai noti modelli di template blogger che usano xml e non i primi template che usano solo xhtml.




Procediamo, come al solito facciamo un backup, e andiamo in modifica,layout,html, lasciamo i widget cosi come sono cioè non espansi:
Ora il codice è disponibile in 3 parti. Una sezione riguardante il foglio di stile css, una sezione per la configurazione, e poi l'effettiva widget.
1- Nella sezione css riguardante lo stile aggiungiamo il seguente codice, in pratica prima di questo tag
]]></ b:skin>

/* 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}



2- ora prima della chiusura del tag /head inseriamo il seguente codice javascript che contiene:
max sono i colori e la grandezza massima per le etichette più numerose, min per il colore e la grandezza minime delle etichette meno numerose


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


3- passiamo all' inserimento del nostro widget, troviamo la seguente riga:


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



selezioniamo e sostituiamo con il seguente codice:






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



ora salvate si dovrebbero vedere le nuvole ti tag delle nostre etichette, per cambiare i valori dei colori edelle grandezze basta andare a ststituire nel codice js del passaggio 2 il valore max dei colori è 255, per la grandezza non esagerate. fatemi sapere a presto..