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:

image

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

43 commenti:

Matty ha detto...

tene...sei il genio del male...e te lo dico nel modo + bello :D

Splashboom ha detto...

Non so se lo conosci ma http://www.wowzio.com/ offre un bel servizio per inserire widjets da inserire nel proprio blog tra cui anche label cloud. Purtoppo statico però, le etichette non si muovono.

Io comunque lo segnalo, nel caso qualcuno si accontentasse per non dover affrontare modifiche al template.

Versione Beta ha detto...

Ciao Tenebrae, io nel mio blog uso label cloud dinamiche, non ricordo se sia lo stesso metodo...

ps ti ho mandato una email giorni fa a proposito della numerazione a fondo pagina... l'hai ricevuta? Saluti

vicio ha detto...

non funge neanche questo e' statico

danny* ha detto...

Ciao Tenebrae. Senti non c'entra con l'argomento del post, ma perchè blogger da due giorni ha posizionato i lettori "segui il blog" in verticale???? E' orrendo e occupa troppo spazio....si può sistemare?
Buona giornata danny*

Tenebrae ha detto...

@splashboom: non conoscevo il sito, grazie per la segnalazione! può essere utile per chi non vuole cimentarsi troppo in modifiche del codice!

@versione beta: ti ho risposto in posta!

@danny: non è così, sei solo tu a vedere quest'effetto, così impari a stare ore a cavalcare sotto il sole... scherzi a parte, io non lo vedo in verticale!

Tenebrae ha detto...

@splashboom: però puntualizzo una cosa: io non amo molto i widget con la pubblicità incorporata, non fanno una bella impressione, sei d'accordo con me?

ma ripeto, utile sicuramente per chi non vuole cimentarsi in modifiche html... magari lo segnalerò su questo blog!

Tenebrae ha detto...

@vicio: in che senso?

vicio ha detto...

ora ti spiego : io avevo messo gia' quello statico perke' blogumus non funzionava e quindi non riesco a trovare l' elemento da sostituire ho provato a sostituire quello statico ma il risultato? 2 label cloud statici

vicio ha detto...

hi hi trp volte statici

Splashboom ha detto...

mah, io utilizzo un solo widget da quel sito, non il label cloud perché ero già riuscito ad inserire quello dinamico seguendo le istruzioni di un tuo post precedente, e devo dire che pubblicità non me ne arriva.

Certo, si vede il loro logo ma in fondo questo gli è dovuto, considerando il servizio gratuito.

Poi, i widget che crei sono inseribili anche in blog diversi dal tuo. La cosa può portare degli svantaggi (tutti possono prenderlo) ma anche dei vantaggi, per dire la gente che ti linka potrebbe inserire l'indice di tutti i tuoi articoli direttamente nel loro blog, oppure se ti appassiona l'arte o la fotografia avere tutti i lavori dei tuoi siti preferiti costantemente aggiornati nel proprio blog tramite un semplice widget.

Insomma a me il servizio piace, anche se non ne sfrutto tutte le potenzialità. Se non lo conoscevi ti consiglio di approfondirlo, magari ti torna utile.

Anonimo ha detto...

ah..ah..ah.. spiritoso!!! ;P
Potevo capirlo se avevo questo effetto di visualizzazione solo da un pc, ma io li vedo così su TUTTI i blog e su TUTTI i pc (sia ufficio che casa).
Vabbè....li toglierò almeno risolvo il problema alla radice. Amen
Danny*

♣gimbola♣ ha detto...

quello che io mi chiedo è se è possibile inserire il _codice js_ di questo label cloud in un file esterno, invece di portarsi dietro tutte quelle stringhe

ciao

Anonimo ha detto...

Ciao, sono un tuo feed, una domanda è possibile inserire questo anche in un blog di Libero?Libero usa piattaforma html, nn accetta java,Grazie,Giuseppe.

novalis ha detto...
Questo commento è stato eliminato dall'autore.
novalis ha detto...

Ciao,
posso aggiungere questo label cloud, mantenendo anche le mie etichette?
Possono stare entrambe?
Grazie

the Tramp ha detto...

Ciao Ten, ho provato ad inserirlo e funziona ma non sono riuscito a cambiare il colore ( ho inserito il codice x il rosso, preso dal sito che consigliavi nel tuo post, ma niente).Mi potresti indicare la strada giusta?grazie.

Federico ٩๏̯͡๏)۶ ha detto...

Bellissimo, funziona alla grande!

Tenebrae ha detto...

@gimbola: si, si dovrebbe poter fare senza problema, stasera mi ci applico ed eventualmente integrerò il post

@novalis: si, il modo più semplice è fare prima quest'intervento e poi inserire un altro elemento di tipo etichette

@tramp: come hai provato a mettere il rosso? in questo caso, per farlo dovresti usare

maxColor=[255,0,0]

@anonimo: mi dai il link al tuo blog su libero? non so neanche dove si trovino :)

Tenebrae ha detto...

@vicio: prova a ripartire da una situazione pulita: togli tutti gli elementi di tipo etichetta, inseriscine uno e fai la modifica

Tenebrae ha detto...

@splashboom: assolutamente d'accordo con te, sono widget molto utili... come ho già detto, è probabile che li proporrò anche su questo blog :)

vicio ha detto...

ok provero'

novalis ha detto...

Grazie mille

Antonio ha detto...

Io mi fermo al passo 3, perchè non trovo la porzione di codice che descrivi.
Trovo solo questa (le etichette le ho chiamate "Argomenti"):

b:section class='R-Sdb' id='R-Sdb' maxwidgets='4' showaddelement='yes'
b:widget id='Label1' locked='false' title='Argomenti' type='Label'/
b:widget id='LinkList2' locked='false' title='Io Sostengo' type='LinkList'/
b:widget id='LinkList1' locked='false' 'title='Links' type='LinkList'/

Spyke ha detto...

CIAO TENE..
SCUSA SE PUNTUALIZZO! PER ELIMINARE BLOGUMUS.. BASTA SOLTANTO ELIMINARE IL WIDGET?? NON E' CHE RESTANO DELLE TRACCE AL INTERNO DEL TEMPLATE CHE POI TI POSSONO CONFONDERE NELLE SUCCESSIVE MODIFICHE?? VISTO CHE IL MIO FUZONINA BENE SOLO CON FIREFOX IN TUTTE LE PAGINE DEL BLOG, A QUESTO PUNTO VORREI PROVARE A INSERIRE IL LABEL CLOUD!
CIAO ASPETTO UNA RISPOSTA
GRAZIE

Tenebrae ha detto...

@spyke: per favore, non usare sempre il maiuscolo

si, per eliminare blogumus basta semplicemente togliere il widget, e non resta niente

Tenebrae ha detto...

@antonio: il codice del passo 3 devi metterlo al posto di quella che comincia dalla seconda riga di codice che mi hai mostrato

mary47 ha detto...

Grazie Tenebrae anche per questo post. Ho apportato le modifiche ma non mi salva il modello.
Mi viene un dubbio, al punto 1 le parentesi quadre non sono seguite immediatamente da b:skin (in mezzo ci sono altri dati). Il nuovo codice lo devo incollare appena sopra le 2 parentesi quadre oppure......

Grazie ancora e...buona domenica!

Tenebrae ha detto...

@mary: il codice va subito prima delle parentesi quadre... per intenderci, subito dopo l'ultima parentesi graffa prima delle parentesi quadre... spero di essere stato chiaro :)

mary47 ha detto...

Chiarissimo Tenebrae, il modello ora mi viene salvato ma il risultato è solo la scritta "etichette" e niente altro. Ti ringrazio comunque e ...buona serata!!

Davide Dragonetti ha detto...

ciao tenebrae, una domandina! E' possibile fare in modo che alcune categorie esistenti nel blog non figurino all'interno del cloud? c'è un comando da poter inserire nel codice?
grazie come al solito ;)

novalis ha detto...

Ciao Tenebrae, come devo fare per visualizzarlo al centro della sidebar e non a destra come nel mio caso?
Grazie sempre.

Tenebrae ha detto...

@davide: si, basta controllare in javascript il nome dell'etichetta prima che venga scritta, se magari anche altri mostreranno interesse potrei fare un post sulla cosa

@novalis: puoi provare a mettere l'elemento tra

<center>

e

</center>

novalis ha detto...

A parte che non ho capito (ed è normale!),
ho visto che con IE va benissimo e cioè al centro è con Chrome che si allinea sulla destra(?),
comunque grazie

Tenebrae ha detto...

@novalis: hai ragione, a volte ho così tanti commenti a cui rispondere che perdo la bussola... nel tuo caso è un'impostazione del template, che andrebbe modificato, non è facile spiegare qui come... io comunque su chrome o ie8 vedo le stesse cose... ma non è poi tanto malvagio!

Gianpy ha detto...

cazzo sei un grande!

aerie ha detto...

WOW!!!
Ho provato ed è venuto bellissimo!!
Però vorrei cambiare il colore delle scritte, devo perderci un po' di tempo per cui adesso ho ancora le vecchie "etichette"
Grazie mille per le tue spiegazioni, sono davvero utili!

djpacheco ha detto...

chao he da poco che ho aperto il blogspot ma gia ho fatto delle modifiche sei un grande ho un probblema que il punto 3° i codici cosi non mi apaiono mi daresti una dritta per cortesia se vuoi ti mando il mio in un word pad e gli dai una occhiata ti ringrazio...

Emix ha detto...

Ciao, volevo ringaziarti per questo codice, funziona perfettamente e non è stato complicatissimo da inserire.
Complimenti per il tuo blog :)

Matteo Porretta ha detto...

ho provato, ho seguito passo passo, ho incrociato le dita...è il risultato è stato magnifico...grazie

Maurizio ha detto...

Una sola parola: FANTASTICO!

Grazie per le tue guide,sei un fenomeno!
Questo è il mio blog http://tifosiamo.blogspot.com se ti va passa quando vuoi! ;)
A presto!Ciao ciao!

Maurizio Oliveri ha detto...

Ciao!

Bravo e complimenti! Ero uno dei bloggers che aveva appunto problemi con la versione "nativa" delle labels a nuvola, e non ero ancora riuscito a trovare un codice HTML che funzionasse finchè non ho trovato il tuo!

Ti ringrazio!

http://cornovum.blogspot.com

Tenebrae ha detto...

@maurizio: grazie a te dei complimenti e benvenuto nel mio blog!

questa modifica è sicuramente più complessa ma i risultati sono certamente d'effetto


Prima di lasciare un commento, leggete qui

Posta un commento