Pubblicato il 23/07/08 - aggiornato il  | 19 commenti :

Inserire una label-cloud in Blogger.

Questo post si basa su un lavoro di phydeaux3 ed è la traduzione dall'inglese di questo "leggendario" post che risale al settembre 2006 ed ha ricevuto la bellezza di 556 commenti entusiasti. Cominciamo ad entrare nel blog in Layout quindi in Aggiungi Elemento pagina quindi scegliete l'elemento Etichette e posizionatelo dove volete. Il risultato è brutto perché viene un elenco a discesa decisamente antiestetico e per nulla funzionale. Il tutto è mostrato in questi screenshotSalvare il tutto e andare su Modifica Html quindi senza espandere i modelli widget cercare questa linea di codice

]]></b:skin>

ed immediatamente prima inserire questo 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}

quindi immediatamente dopo di
]]></b:skin>
ma prima del codice
</head>
inserire quest'altro 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>


Salvare il modello ed espandere i modelli widget mettendo il segno di spunta, quindi cercare questa riga di codice

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

Selezioniamo e cancelliamo tutto il codice da questa linea fino alla linea che chiude il widget cioè fino alla linea

</b:widget>

Quindi al posto del codice cancellato incolliamo quest'altro codice

<b:widget id='Label1' locked='false' title='ETICHETTE' 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>



Salviamo nuovamente il modello e visualizziamo il blog. Se avete seguito il procedimento dovrebbe apparire la vostra "nuvoletta di etichette" che può essere personalizzata a seconda della forma e dei colori del vostro modello. Vediamo come:
  • andando sul secondo codice immesso troviamo la riga var cloudMin = 1; questo è il numero minimo di occorrenze per un'etichetta per essere visualizzata, cambiando 1 con 2 avrete una "nuvola" molto più compatta.
  • sempre nella stessa parte di codice maxFontSize e minFontSize rappresentano, in pixel, la grandezza massima dell'etichetta
  • possiamo inoltre cambiare colore considerando che è rappresentato in formato RGB. In sostanza minColor è il colore delle etichette più piccole, in questo caso RGB =[0,0,0] cioè sono di colore nero, mentre maxColor è il colore delle etichette più grandi, in questo caso RGB=[0,0,255] che sono i numeri che definiscono il colore blu.
  • per una spiegazione su come impostare IcShowCount e la sezione CSS vi rimando al post originale.
  • se vuoi personalizzare il titolo del widget lo puoi fare in un secondo momento. Al posto di ETICHETTE ho messo "Clicca sull'etichetta per visualizzare i post corrispondenti".
A cosa serve questo widget? Provate a cliccare su un'etichetta e vi si apriranno tutti i post che la contengono; inoltre i visitatori del vostro blog avranno già dalla Home una visione totale di tutti gli argomenti che avete trattato. L'obbiettivo è sempre lo stesso far rimanere i visitatori più a lungo possibile!


19 commenti :

  1. Scusami l'ignoranza, ma non ho capito a cosa serve la modifica all'HTML. Come apparirà dopo il widget ? Sarà diverso in che modo ? (sai ho paura di provare e poi fare un casino)

    RispondiElimina
  2. @alexandro
    Prima di provare devi scaricare il modello e se poi le cose non funzionano fai il back-up cioè lo ricarichi. La modifica all'Html è quella che hai fatto quando hai messo i bottoni di voto nei social network

    RispondiElimina
  3. Grazie per la dritta,mi serviva proprio!
    Complimenti per il Blog!

    RispondiElimina
  4. @Larry
    Felice di esserti stato utile e grazie per i complimenti. Continua a seguirmi magari sottoscrivendo i feed.
    Ciao

    RispondiElimina
  5. @Ignazio
    Il problema credo stia nella cancellazione del codice da "b:widget" a "/b:widget". E' probabile che non lo esegui correttamente o, forse, nel mezzo c'è un tag "b:section" che non ci dovrebbe stare. Non saprei dare un'altra spiegazione

    RispondiElimina
  6. Ciao parsifal, ho eseguito passo a passo le tue spiegazioni sulla creazione di una tag cloud, ma mi viene sempre l'orrenda colonna. Come puoi vedere su autoincorsia.blogspot.com alla voce etichette (sidebar grande in basso)

    RispondiElimina
  7. @Elio Romano
    Ho visto, non saprei che dirti perché ad altri funziona, forse è il tuo modello, prova con Blogumus. Ciao

    RispondiElimina
  8. Ciao, scusa ma sto provando da due giorni a modificare la cosa così come l'hai postata, ma non succede proprio un bel niente...

    RispondiElimina
  9. @dimensione denaro
    Questo post è piuttosto vecchio può essere che il codice non vada più bene. Ho dato un'occhiata al tuo blog e non vedo il widget etichette. Sei sicuro di averlo inserito prima di modificare il template?
    Devi anche considerare che la nuvola di etichette da un mese è possibile inserirla direttamente con Blogger senza modificare il template seguendo le indicazioni di questo articolo.
    Può essere che l'introduzione di questa nuova feature abbia reso impraticabile la modifica del modello nel senso indicato dal post.
    Ciao

    RispondiElimina
  10. Ciao!
    Ma c'è la possibilità di avere sia le etichette (magari senza nuvola, sotto ogni post) che un elenco dei post per categoria?
    Grazie

    RispondiElimina
  11. @Alessandro Marra
    Per le etichette basta che sposti il widget sotto l'area del post con il mouse su elementi pagina. Per un elenco dei post per categoria di suggerisco questi widget
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi_07.html
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-nel-blog-il-widget-degli.html
    Ciao

    RispondiElimina
  12. Ciao Parsifal

    complienti, ho modificato il widget seguendo le tue indicazioni e va una bomba. Una sola domanda: come faccio a modificare la largezza del widget? Io l'ho posizionato nella sidebar del mio blog e vorrei portarlo a 300px, in quale parte del codice intervengo per apportare questa modifica?

    Grazie mille e complimenti ancora

    RispondiElimina
  13. @Jago Delarge
    Non c'è la personalizzazione della larghezza. Viene a occupare automaticamente il 100% della sidebar o del footer in cui si inserisce. Si possono però modificare le dimensioni dei caratteri come illustrato nell'articolo. Ho visto il tuo blog e forse hai una sidebar di destra suddivisa in due parti. Prova a andare su Design > Elementi pagina e a spostare il widget nella parte alta della sidebar.

    RispondiElimina
  14. Ciao Ernesto. Alla fine ho deciso di spostare il widget nella sidebar di sinistra, dove forse ha una collocazione migliore.

    P.s. ti ho linkato in home page

    Grazie e complimenti!

    RispondiElimina
  15. Ciao, scusa, ho appena inserito la nuvola delle etichette, volevo solo sapere, come faccio a cambiare il colore da blu a viola? Che codice devo inserire? Perché sicome la mia grafica è tutta viola, rosa, vinaccia, blu così sta male :(
    Comunque grazie per le idee, funzionano sempre :)

    RispondiElimina
  16. @Selli
    Ci sono queste due righe che determinano i colori delle etichette più grandi e di quelle più piccole con tutte le tonalità intermedie
    var maxColor = [0,0,255];
    var minColor = [0,0,0];
    si tratta del nero e del blu. Puoi inserire i codici RGB di altri colori a piacere. Puoi consultare questo post
    http://www.ideepercomputeredinternet.com/2008/12/come-conoscere-il-codice-numerico-dei.html
    e questa tabella in italiano
    http://users.libero.it/luclep/itaint.htm
    Per passare dai codici esadecimali alle terne di numeri da 0 a 255 puoi provare questo tool gratuito
    http://www.ideepercomputeredinternet.com/2011/03/color-picker-per-conoscere-i-codici-rgb.html
    o quest'altro
    http://www.ideepercomputeredinternet.com/2011/04/pf-color-tool-per-identificare.html

    RispondiElimina
  17. Grazie mille, mi sei stato davvero utile!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy