Tag Cloud in Blogger Blogspot



 geek4work

Tag cloud o label cloud che dir si voglia anche in Blogger Blogspot.

tag-cloud2_thumb4.png

Ebbene si, anche in Blogger, come in altre piattaforme blog quali WordPress,  è possibile aggiungere un codice in modo che le label siano presentate non come un elenco ma in formato “nuvola”.

La procedura non è difficile e non è necessario conoscere alcuna riga di html. Bastano solo alcuni copia ed incolla di codice. Segui la procedura che segue.

Intanto per iniziare mettiti al riparo da eventuali modifiche errate e salva il modello esistente sul tuo PC da Layout/Modifica HTML e clicca su Scarica modello completo.

mode.JPG

Ora sei pronto.

Passo 1

Posiziona sul tuo sito il widget etichette nel posto dove desideri. Successivamente lo potrai spostare normalmente come qualunque altro widget.

Passo 2

Andiamo a cercare il codice ]]></b:skin> e prima di tale riga incolliamo il quanto segue:

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

Passo 3

Prima di </head> successivo a ]]></b:skin> incollare 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>


Passo 4

Cerchiamo la riga <b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>

e sostituiamola con tutto il codice che segue:

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

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

Ora controlliamo che funzioni tutto cliccando su anteprima e se è ok il gioco è fatto!

Inoltre è possibile personalizzare la tag cloud agendo sulle variabili di cui al passo 2, tipo:

var cloudMin = 1; indica il numero minimo di volte che l’etichetta deve comparire nei post perchè possa essere menzionata nella Tag Cloud.

Le altre variabili riguardano la grandezza e i colori. Provate e personalizzate in base alle Vs.esigenze!

Buon divertimento!

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Ho trovato il tuo post molto interessante e mi sono subito messo a tentare di implementarlo all’interno di uno dei miei blog su blogspot. (http://linguadifata.blogspot.com/)
    Dopo aver però seguito passo passo le tue indicazioni, verificato ogni singola digitazione e corretto le varie virgolette e apici qui e là, Blogger, appena tento di visualizzare in anteprima il risultato, continua a darmi lo stesso messaggio:

    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The content of elements must consist of well-formed character data or markup.

    Hai qualche suggerimento? Grazie mille, ciao.
    Alfonso

  • Non saprei dirti esattamente. Sul mio geek4work.blogspot.com funziona … potrei solo dirti di riprovare e stare attento a copiare esattamente … ma l’hai già fatto senz’altro. Oppure prova su un altro blog e vedi se ti dà lo stesso problema.
    Ciao

  • dj pacheco

    chao io ho provato non sei l’unico che ha pubblicato l’ho stesso artico ma sono uguali anche a me mi sale lo stesso risultato erro che e male strutturato manca una chiusura se mi mandi il tuo emial io ti mando il mio html su un word pat e gli dai una occhiati che ne dici???? ti ringraziarei tantissimo…

  • Testo il codice su un altro sito di prova e poi vi faccio sapere. Ciao

  • A me funziona!

  • Come dice “dj pacheco” ho trovato il codice anche su un altro sito. Utilizzando quel codice funziona tutto. Probabilmente è un problema di codifica dei caratteri nel testo qui allegato (es. le virgolette qui utilizzate sono dei caratteri speciali e non semplici apici, quindi non riconosciuti dal compilatore).
    Per “dj pacheco”, se hai bisogno dell’URL del sito con il codice funzionante appena ho tempo te lo giro, intanto se vuoi lo puoi vedere in funzione sul mio mini-blog (http://linguadifata.blogspot.com)
    Ciao.

Pinterest