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

MTV e la filosofia del “Do Not”: quando la musica anticipava la crisi del digitale

  MTV e la filosofia del “Do Not”: quando la musica anticipava la crisi del digitale Originale dalla campagna do not socialize di MTV Nel panorama delle campagne pubblicitarie provocatorie, quella di MTV denominata “Do Not Socialize” – parte della più ampia “Do Not” Philosophy – resta una delle più audaci e profetiche. Lanciata intorno al 2010, in un’epoca in cui i social network stavano conquistando il mondo, MTV si distaccò dal coro celebrativo per proporre una riflessione controcorrente: e se il digitale ci stesse rubando la vita reale? La campagna, visivamente potente e concettualmente ironica, invitava i giovani a non socializzare online , non condividere , non postare , non taggare . Un paradosso, certo, ma anche una provocazione lucida: MTV, da sempre voce della gioventù, stava mettendo in discussione il nuovo culto della connessione permanente. In un mondo che stava diventando sempre più “social”, MTV suggeriva di tornare a essere asociali – nel senso più liberatorio del...

Quando l’uomo lasciò il giardino dell'Eden: miti, agricoltura e la memoria di un trauma

C’è un filo sotterraneo che unisce Harari, Graeber e i miti più antichi dell’umanità. Non è un dettaglio erudito, né un gioco di parallelismi: è la percezione che i miti non siano semplici favole, ma la forma simbolica con cui le società hanno registrato le loro grandi trasformazioni. Tra queste, nessuna è stata più radicale della rivoluzione agricola. Il mito come memoria culturale Harari lo dice con una formula provocatoria: non è stato l’uomo ad addomesticare il grano, ma il grano ad addomesticare l’uomo. Graeber e Wengrow, da un’altra prospettiva, mostrano che la transizione all’agricoltura non fu un destino inevitabile, ma una scelta culturale, ripetuta e spesso reversibile. Eppure, quando quella scelta divenne irreversibile, lasciò un segno profondo. I miti sono la traccia di quel segno. La Genesi come racconto polemico della civiltà La storia di Adamo ed Eva, letta fuori dal suo involucro teologico, sembra la memoria di un mondo perduto. Prima del frutto proibito, l’umanità vive...

Il silenzio che parla: la Canestra di frutta di Caravaggio e il paradosso della natura morta

In un’epoca in cui l’immagine è spesso rumore, la Canestra di frutta di Caravaggio si impone come un invito al silenzio. Non un silenzio vuoto, ma uno che risuona dentro chi guarda, che sospende il brusio del mondo e ci riconduce a noi stessi. Davanti a questo dipinto non viene da parlare, non viene da smanettare sul telefono, non viene da fare nulla se non ascoltare quel silenzio contagioso che avvolge gli oggetti. Caravaggio, mago delle composizioni, riesce a trasformare una semplice cesta di frutta in un teatro dell’anima. La sua natura morta non è una pausa dalla figura umana, ma una sua intensificazione. Paradossalmente, proprio escludendo l’uomo, il pittore ci parla della nostra umanità con una profondità che pochi ritratti riescono a raggiungere. Le mele ammaccate, le foglie ingiallite, l’uva che sembra sul punto di marcire: ogni dettaglio è un frammento di tempo, un’eco della nostra fragilità, della nostra bellezza imperfetta. Il silenzio che emana dalla Canestra non è solo vis...