Inserire un label cloud su Blogger!

-------------------------

ATTENZIONE!

Questo articolo è ormai obsoleto. Per sapere come implementare una label cloud su Blogger, cliccate qui.

-------------------------

Visto che Blogumus continua a non voler funzionare su alcuni blog (giusto un paio, tra cui quello di Mary), eccomi qui a proporre una valida alternativa, che interesserà anche chi non ama i virtuosismi delle animazioni flash, ovvero un classico label cloud per Blogger:

Per chi non lo sapesse, per label cloud (o “nuvola di etichette”) si intendono i collegamenti alle varie categorie del blog ammassati uno vicino all’altro piuttosto che in una lista, per risparmiare spazio. La grandezza di ogni etichetta dipende dal numero di articoli presenti in quella categoria: più post ci sono su un determinato argomento, più la sua “label” apparirà grossa. Anche il suo colore viene modificato allo stesso modo.

Allo stato attuale, Blogger non permette nativamente di inserire questo widget come elemento nel template, ma questo non ha fermato ovviamente gli smanettoni di mezzo mondo che hanno trovato mille modi per sopperire alla mancanza. Il già citato Blogumus nè è un esempio.

Tra i vari modi, propongo quello che ritengo migliore. Perchè una volta fatto l’intervento, l’elemento si aggiornerà in automatico senza bisogno di interventi futuri. Purtroppo non sono riuscito a risalire all’autore originale, quindi mi limito a mandargli un grazie col pensiero sperando che gli fischino le orecchie.

Prima di cominciare, come sempre, raccomando di fare il backup del template di Blogger. Dopodichè, andiamo in Layout->Modifica HTML e selezioniamo “Espandi modelli widget”. Per facilitarvi nel lavoro, potete lavorare su una copia del codice con Notepad++, lo stesso che ho usato io.

Passo 1 – Definiamo l’aspetto del label cloud

Cercate la seguente riga di codice:

]]></b:skin>

Subito sopra, incollate:

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

Questo codice serve a definire l’aspetto del label cloud. Chi vorrà, potrà modificare facilmente colori e tipo di carattere.

Passo 2 – Inseriamo la prima porzione di codice

Cercate la seguente riga di codice:

</head>

E subito sopra, incollate:

<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>

Questo codice può essere personalizzato nel seguente modo:

• cloudMin: minimo numero di articoli presenti in una categoria affinchè ne compaia la sua etichetta
• maxFontSize: dimensione massima del carattere di un’etichetta
• maxColor: colore verso cui tende un’etichetta man mano che vi si aggiungono post, secondo la codifica RGB dei colori (in questo caso è blu)
• minFontSize: dimensione minima del carattere di un’etichetta
• minColor: colore da cui partono le etichette quando ci sono ancora pochi post, in questo caso nero
• lcShowCount: se messo a true, visualizza il numero di post presenti in quella categoria.

Passo 3 – Inseriamo le etichette

Prima di procedere con questo terzo passo, assicuratevi di avere già un elemento di tipo “Etichette” nel vostro blog, dopodichè cercate questa porzione di 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'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

La prima riga potrebbe essere leggermente diversa, in particolare la parola “Etichette” dovete sostituirla con quello che avete usato come titolo dell’elemento nel blog. Ricordatevi che mentre la prima riga comincia con

<b:widget

l’ultima dovrà essere:

</b:widget>

Una volta individuata questa bella porzione di codice, sostituitela con questo:

<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>

Passo 4 – Incrociamo le dita e salviamo il template

A questo punto non rimane che salvare il template e, se tutto è andato bene, vedremo già subito la nostra nuova label cloud. Se vi viene segnalato che l’elemento “Label1” è già presente, o avete più elementi di tipo Etichette (e in questo caso consiglio di cancellarli prima per non fare confusione) o non avete sostituito la porzione di codice come dico nel terzo passo.

Attenzione a non modificare mai l’elemento da Layout->Elementi pagina, perchè da quel momento non funzionerebbe più e dovreste ripetere il terzo passo. Se volete cambiare il titolo del widget, cercate nel template la prima riga dell’ultima porzione di codice che avete incollato e modificate manualmente quello che io ho messo come “Etichette”.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!