Etichette di Blogger visualizzate in una nuvola animata.

Come installare il gadget della Nuvola animata e colorata delle Etichette di Blogger completamente personalizzabile.

Riprendo un widget storico di Blogger che fu ricavato dal plugin di grande successo WP Cumulus per Wordpress. Si tratta di mostrare in una nuvola animata le etichette di Blogger con la limitazione che debbano essere selezionate meno di 30. Questo vuol dire che nel nostro sito ci possono essere anche centinaia di etichette. L'importante è che se ne scelgano solo 30 al massimo. Cliccando su una etichetta apriremo la pagina relativa mentre se si passa con il cursore sopra alla nuvola questa si animerà.

Anche se per questa personalizzazione bisogna modificare il template si tratta comunque di un procedimento piuttosto semplice che può essere applicato sia a blog gratuiti del tipo Blogspot sia a siti sempre su Blogger ma con dominio personalizzato. È anche possibile modificare i colori a nostro piacere per renderli compatibili con quelli del nostro layout.

 

Il widget ufficiale di Blogger per le Etichette non è male, può essere inserito in una pagina statica e la sua nuvola anche se non animata può essere personalizzata in modo originale. Per ottenere l'effetto simile allo screenshot precedente si procede in questo modo. Dopo aver salvato il template si va su Modello > Modifica HTML, si clicca sul  codice, si digita Ctrl+F e si cerca questa riga 

<b:section-contents id='sidebar-right-1'>

Si tratta dell'inizio dei widget posizionati nella sidebar di destra. Se avete due sidebar a destra cercate la riga con il numero 2 al posto di 1. Se invece volete posizionare il widget nella sidebar di sinistra allora cercate la riga 

<b:section-contents id='sidebar-left-1'>

Nel modello visualizzerete sotto detta riga tutti i gadget installati in tale sidebar

Cercate il posizionamento più adatto al vostro widget e posizionate il cursore alla fine della relativa riga quindi pigiate su Invio per creare uno spazio. In tale spazio incollate questo codice 

<b:widget id='Label99' locked='false' title='Nuvola Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='https://googledrive.com/host/0B5vupkCL4QrxQnlwN25SZHd2eTQ/swfobject.js' type='text/javascript'></script>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject("https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/blogumus.swf", "tagcloud", "250", "250", "7", "#ffffff");
so.addVariable("tcolor", "0xD84938");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</b:includable>
</b:widget>

in questo modo

Salvate il modello. Se avete un sito con più di 30 etichette questo widget non funzionerà. In questo caso andate su Layout e cercate l'elemento pagina Nuvola Etichette se avete lasciato questo titolo per il widget. Cliccate su Modifica per aprire la finestra di configurazione

 

Si deve mettere la spunta su Etichette selezionate per visualizzare il loro numero. Nel caso fossero più di trenta bisogna cliccare su Modifica per selezionarne un numero minore 

Dopo aver completato l'operazione si va su Salva per aggiornare il gadget che adesso sarà visibile anche in quei blog con più di 30 etichette. Non vanno toccate le altre opzioni di configurazione. 

Le personalizzazioni che si possono operare riguardano

1. 250 e 250 sono la larghezza e l'altezza del widget
2. #ffffff è il codice del colore dello sfondo
3. #D84938 è il codice del colore del testo
4. "100" è la velocità della animazione
5. '12' è il numero di pixel della dimensione dei caratteri
6. Label99 è il numero del widget che può essere inserito anche in presenza di un altro gadget delle Etichette magari ufficiale di Blogger.

Il gadget può essere modificato anche in un secondo momento direttamente dal modello. Bisogna cercarlo con Ctrl+F e cliccare sulle due freccette nere poste a sinistra per visualizzare tutto il codice.