Passa ai contenuti principali

Tag Cloud anche in Blogger Blogspot

Tag cloud o label cloud che dir si voglia anche in Blogger Blogspot.
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.
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&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>
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!

Post popolari in questo blog

Imparare a scrivere più velocemente con la tastiera, gratis e online

Imparare a scrivere più velocemente con la tastiera del comput er, gratis e online Quelli un po' più grandicelli si ricorderanno come, prima della diffusione dei personal computer, fosse complicato buttar giù con la macchina di scrivere anche una lettera di poche righe ... se si sbagliava voleva dire, spesso, dover ripartire da capo. Molti hanno imparato a digitare i caratteri sulla tastiera da soli, un po' alla volta ma senza nessuna guida ... senza proccuparsi troppo di sbagliare, tanto i tasti backspace o canc sono lì, belli comodi, e utilizzarli non comporta nessun problema. Poter utilizzare correttamente tutte le dita tuttavia ci consentirebbe di scrivere più velocemente. Ho trovato un servizio gratuito che consente di imparare a digitare sulla tastriera del nostro computer utilizzando le dita delle mani nella maniera corretta. Il servizio, gratuito e utilizzabile senza dover installare alcun programma , ci guida passo passo iniziando da esercizi con livelli di difficoltà

Let's go, It's Google I/O

Come sincronizzare i contatti Google in Thunderbird?

Thunderbird, Thunderbird e ancora Thunderbird!!! Da un po' di tempo non funziona più Gcontacts, estensione che consentiva di sincronizzare i contatti memorizzati su un account Google con la rubrica di Thunderbird. Ho però trovato un valido sostituto, si chiama TBSync. Anche questa estensione permette di memorizzare i contatti e di sincronizzarli in un verso o nell'altro o solo in lettura. Per il corretto funzionamento è necessaria anche l'installazione di "Provider CalDAV e CardDAL" che è anche questa un'estensione liberamente scaricabile. Ho visto che però non è compatibile con le ultime versioni di Thunderbird. Se poi ti dovessero essere utili perchè richieste in fase di configurazione dell'estensione, ti indico qui di seguito gli indirizzi cardav e caldav di Google, ricopiati dall'estensione che dicevo sopra: CALDAV GOOGLE  https://apidata.googleusercontent.com/caldav/v2/ CARDDAV GOOGLE https://www.googleapis.com/.well-known/carddav   Enjoy!