Label Cloud in stile word press per gestire le etichette di Blogger - 2a Parte

In questo post del sito Blogger Hacks viene spiegato come implementare Label Cloud in stile wordpress per gestire le etichette di Blogger. Si tratta di un sistema molto più pratico ed elegante del semplice widget "Etichette" di Blogger, che si limita a mostrare tutti i tags utilizzati nel blog con il numero di ricorrenze tra parentesi.
Nello script segnalato da Blogger Hacks, invece, si può decidere il numero minimo di ricorrenze necessario per far si che un tags appaia nella Label Cloud. Più un tags è utilizzato all'interno del blog, più il font utilizzato diventa grande, ed anche in questo caso la dimensione minima e massima del font può essere personalizzata. Date uno sguardo a sinistra per vederne il risultato.

Riportiamo di seguito le istruzioni per l'implementazione dello script corredate da alcuni screen shot.

La prima cosa da fare è, ovviamente, includere il widget Etichette nel vostro blog. Per farlo dovete andare sulla sezione di gesione del layout del blog e cliccare su Ad a Page Element.

Posizionarsi su etichette, cliccare aggiungi a blog e nella finestra successiva selezionare il tipo di ordinamento: in ordine alfabetico o di frequenza. Per un risultato finale graficamente migliore consiglio di ordinare le etichette in ordine alfabetico.

Spostatevi nella sezione modifica HTML della scheda layout e lasciate deselezionata la casella di controllo espandi widget. Tramite la funzione trova testo del browser cercate il codice ]]></b:skin>
ed immediatamente prima inserite il seguente 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}

Ora posizionatevi immediatamente dopo il codice ]]></b:skin> e inserite il seguente listato

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

Il passo successivo consiste nell'andare a cercare il seguente codice:


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

Attenzione: il alcuni blog può essere leggermente diverso, ad esempio il termine Labels può essere sostituito da Tags, pertanto vi sconsigliamo di cercare l'intera stringa con il comando CRTL + F del browser.

Al posto del codice indicato inserire il seguente

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

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


A questo punto è sufficiente cliccare su anteprima per verificare il risultato e successivamente su salva per consolidare le modifiche

Un aspetto decisamente interessante di questo script è la facilità di personalizzazione. Per fare ciò è sufficiente modificare i seguenti parametri:

• var claudMin=1 indica che è sufficiente che un tag sia citato una sola volta all'interno del nostro blog per far si che compaia all'interno del Label Cloud. Ovviamente aumentando questo numero si applica una selezione al livello di tags visualizzabili.
• var maxFontSize = 20 indica la dimensione massima del font relativo al tag presente più volte
• var minFontSize = 10 indica invece la dimensione minima del font relativo al tag presente meno volte
• var maxColor = [0,0,255] indica il colore del font relativo al tag presente più volte in formato RGB
  
• var minColor = [0,0,0] indica il colore del font relativo al tag presente meno volte
• var lcShowCount = false indica che non deve comparire il numero relativo alla quantità di volte in cui un tag è presente nel blog. Se invece vogliamo far comparire il numerino di fianco ad ogni tag dovremo sostituire il valore false con true

Consigliamo di rendere questi parametri omogenei allo stile del proprio blog