Inserire una Tag Cloud per Blogger
In questa guida vedremo come inserire facilmente una Tag Cloud (Label Cloud) in Blogger Blogspot.
Cosa è una Tag Cloud? E' un modo originale per visualizzare le etichette del nostro blog, all'interno di una "nuvola". La dimensione di ciscuna etichetta all'interno della Tag Cloud, sarà legata alla quantità di post che la contengono.
Per aggiungere un Tag Cloud in Blogger basta modificare il modello Html in uso aggiungendo tre semplici pezzi di codice html.
Se invece ti interessa una Tag Cloud animata leggi la mia guida Inserire una Tag Cloud animata in Blogger.
Anzitutto dobbiamo assicurarci di aver già aver inserito un elemento "etichette" nel nostro Blog. Se non lo abbiamo ancora fatto, andiamo in Layout->Elementi pagina->aggiungi elemento->Etichette.
Per trasformare l'elenco "etichette" in Tag Cloud andiamo in Layout->Modifica Html e cerchiamo all'interno del modello html il codice ]]></b:skin> e subito prima di esso inseriamo il codice seguente:
/* 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}
Adesso cerchiamo di nuovo il codice ]]></b:skin> e subito dopo di esso inseriamo il codice seguente:
<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>
Adesso troviamo il codice <b:widget id='Label1' locked='false' title='Labels' type='Label'/> e sostituiamolo con 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>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>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Prima di salvare il modello, vediamo se in anteprima appare la Tag Cloud. In caso affermativo possiamo salvare il modello.
Affinchè la Tag Cloud funzioni è necessario che ci sia almeno una etichetta con più di una istanza, ovvero ci sia più di un post che sia etichettato con la stessa etichetta. Inoltre è necessario che nessuna etichetta contenga le virgolette (").
Se non avete voglia di modificare i valori predefiniti del tag clouds potete fermarvi quà.
Personalizzare i parametri del Tag Cloud
var cloudMin= 1;
Questa impostazione serve per limitare il numero di etichette mostrato (per esempio se avete un sacco di etichette). Indica il minimo numero di entries necessarie ad una etichetta affinchè essa sia visibile nel tag cloud.
Lasciare l'impostazione a 1 per visualizzare tutte le etichette. Se si immette un numero più alto, solo le etichette che hanno un numero di post superiore al valore immesso verranno visualizzate.
maxFontSize
maxColor
Il primo definisce le dimensioni (in pixel) dell'etichetta con il
massimo valore di voci.
Il maxColor imposta il colore di tale etichetta (in formato RGB).
minFontSize
minColor
Questi sono per l'etichetta con la minima quantità di voci. Ancora una volta la dimensione è in pixel, il colore è nel formato RGB.
L'impostazione predefinita per i colori è: per il massimo BLU e per il minimo NERO.
Tutte le etichette tra i due avranno il loro colore / dimensioni sulla base di quante voci esse contengono.
È possibile selezionare qualsiasi combinazione di colore RGB valido. Se non sai cosa sono i colori RGB, non ti preoccupare. E' solo un modo di definire un colore.
Il metodo più facile per trovare il codice RGB di un colore è aprire il programma MsPaint (che tutti abbiamo sul pc) e andare su Colori->Modifica Colori->Definisci Colori Personalizzati: una volta scelto il colore si vedrà sulla destra la composizione Red Green Blue (RGB).
lcShowCount
Stabilisce se mostrare (true) o no (false) accanto a ciascuna etichetta il numero di post taggati con essa
# labelCloud (text-align: center; font-family: Arial, sans-serif;)
È possibile modificare il font usato nella nube qui: l'impostazione di default è sans-serif. Ricordatevi di specificare la font-family corretta.
Grazie mille, l'ho inserita in due minuti e non è affatto male, certo, perdendoci qualche minuto si può anche personalizzare un pò.
Alla prossima.
grazie, anche io fatto in pochissimi minuti!
Ciao, grazie, funziona benissimo!!!
se io volessi diciamo così "incorniciare" la nuvola cosa devo fare ? se cioè voglio che le tags siano all'interno di un riquadro insomma ? Grazie, Paolo
Peccato non si possano personalizzare i colori... :-(
ciao e grazie, un tutorial utilissimo e funzionante; finalmente.
vorrei sapere qual'è il codice da cambiare per cambiare il colore dei tags
Ciao a Tutti
Ho aggiornato la guida includendo le istruzioni per configurare il Tag Cloud widget per Blogger. Adesso sarete in grado di modificare i colori e le dimensioni oltre che il carattere.
wow!!! detto fatto, grazie ancora, adesso è ancora più bello
Wow! Grazie mille di cuore!
ciao e grazie della guida ma io ho un problema: la tag cloud se la visualizzo in firefox è perfetta... se in explorer è lineare... guardare per credere
www.cristinazagaria.com
non è che mi daresti una mano? ciao grazie!
@DavideNunz
Potrebbero esserci problemi dovuti a IE.
Se capisci un po l'inglese prova a installare questa versione del tag Cloud:
http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html
Fammi sapere come và.
chao ho visto il tuo post e davvero interessante e da poco che ho aperto un blog ci ho messo gia le mani ma ho un problema per inserire il label questa riga b:widget... labe... etichette... non la trovo non so come fare non ce propio mi potresti dare una dritta non so ti posso espedire il mio HTML in un word pad e gli dai un'occhiata ti ringrazierei moltissmo...
aiutooo, ho inserito il gadget etichette, ma quando clicco su visualizza blog non lo visualizzo (anche se in modifica gadget e' presente), poi vado in modifica html, facchio le modifiche desritte, vado su anteprima non vedo cambiamenti, come faccio?????
grazie
lucyy77, taty78,
Affinchè la Tag Cloud funzioni è necessario che ci sia almeno una etichetta con più di una istanza, ovvero ci sia più di un post che sia etichettato con la stessa etichetta. Inoltre è necessario che nessuna etichetta contenga le virgolette (").
Fammi sapere.
scusate la mia ignoranza, ma i nomi delle etichette che voglio inserire li devo scrivere in fase di modifica html???? in quali stringhe????
lucyy77, taty78
Presumo tu non abbia mai creato una etichetta.
Le etichette vanno create quando scrivi un post: nella parte in basso dove c'è scritto "Etichette per questo post:"
Pertanto le etichette sono associate ai post che le contengono.
Ovviamente più post possono condividere una o più etichette.
Fai esperienza con le etichette prima di cimentarti nella costruzione della Tag Cloud.
Spero di averti aiutato
ho inserito i primi 2 codici html e non ci sono problemi, arrivato al terzo il testo indicato, , lo trovo in versioni modificate tipo, oppure oppure oppure insomma nel vigolettato non ci sono le espressioni da te immesse per cui quando faccio anteprima il risultato è errore codice perchè naturalmente ho sostituito quello di default con quello che indichi tu successivamente. Ti sarei grato se mi dessi una mano. Il blog è questo: http://dmarchione.blogspot.com/. Grazie anticipatamente ;-)
ho inserito i primi 2 codici html e non ci sono problemi, arrivato al terzo il testo indicato, b:widget id='Label1' locked='false' title='Labels' type='Label'/, lo trovo in versioni modificate tipo, b:widget id='Blog1' locked='true' title='Post sul blog' type='Blog' oppure b:widget id='Blog1' locked='true' title='Post sul blog' type='Blog' oppure <b:widget id='Attribution1' locked='true' title='' type='Attribution' oppure b:widget id='Profile1' locked='false' title='Informazioni personali' type='Profile' insomma nel vigolettato non ci sono le espressioni da te immesse per cui quando faccio anteprima il risultato è errore codice perchè naturalmente ho sostituito quello di default con quello che indichi tu successivamente. Ti sarei grato se mi dessi una mano. Il blog è questo: dmarchione.blogspot.com. Grazie anticipatamente ;-)
Ciao! ho lo stesso problema con il terzo codice html da inserire. Lo trovo in versioni diverse. cosa devo fare? quale devo sostituire tra le versioni che ho?
idem con patate vedi problemi sopra.. :\\\\ help!!