Pubblicato il 13/12/12e aggiornato il

Il widget della nuvola animata delle etichette per Blogger.

Come installare il widget della Nuvola Animata delle Etichette.
Dopo che un hosting su cui era stato caricato un file SWF è stato classificato da Google come contente malware ho deciso di ripresentare il widget della label-cloud animata per Blogger. Si tratta di una nuvola animata delle etichette del blog e, cliccando su una di esse, si accederà all'URL della etichetta su cui si è cliccato.

L'installazione deve essere fatta modificando il modello ma è piuttosto semplice. L'unica difficoltà è per coloro che hanno un dominio personalizzato e che non possono quindi usufruire di Google Sites come hosting dei javascript e dei file SWF. Ho quindi deciso di suddividere il tutorial in due parti per maggiore chiarezza di esposizione.


COME INSTALLARE LA NUVOLE DI ETICHETTE IN UN SITO BLOGSPOT

nuvola-animata-etichette
Se si possiede un blog gratuito su Blogger, dopo aver salvato il template, si va su Modello > Modifica HTML > Procedi e si cerca una riga come questa

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

Se vogliamo installare il widget nella sidebar di sinistra basterà cercare left al posto di right. Subito sotto a questa riga saranno visibili i widget che abbiamo inserito nella sidebar

nuvola-etichette-blogger

Cercate la posizione giusta per la vostra nuvola di etichette. Cliccate con il cursore alla fine della riga e andate su Invio per creare un salto di riga. Nella posizione prescelta 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://sites.google.com/site/scriptperilblog/widget-1/swfobject.js' type='text/javascript'></script>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/musicafilemp3/file-video/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>

quindi salvate il modello. La nuvola verrà visualizzata in tutte le pagine del blog. Le personalizzazioni più rilevanti riguardano i seguenti parametri:
  1. Label99 è l'ID del widget nel caso avreste inserito altri gadget delle Etichette 
  2. Nuvola Etichette è il Titolo del widget
  3. "250", "250", e "#ffffff" rappresentano la larghezza, l'altezza e il colore di sfondo
  4. D84938 è il codice esadecimale del colore del testo
  5. tspeed", "100" è la velocità della animazione
  6. style='12' è la dimensione in pixel dei caratteri del testo
  7. Importante: questo gadget funzionerà solo se abbiamo un sito con meno di 30 etichette 
Se avete più di 30 etichette potete comunque selezionarne un numero non superiore a questo numero andando su Layout > Modifica nell'elemento delle Etichette e mettendo la flag su Etichette selezionate > Modifica per poi sceglierle nella parte bassa della pagina popup

selezionare-etichette-blogger

Si va quindi su Completato e Salva.

INSTALLARE LA NUVOLADI ETICHETTE IN UN DOMINIO PERSONALIZZATO

Anche in questo caso rimangono invariate le considerazioni sul numero massimo di etichette (30) e sui parametri da personalizzare. I file che ho caricato su Google Site dovranno però essere caricati su DropBox o su Google Code. Si tratta di un file javascript e un un file SWF che possono essere scaricati dal mio account Dropbox sotto forma di cartella zippata
Il codice da incollare con le stesse modalità dei blog gratuiti sarà il seguente

<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='...swfobject.js' type='text/javascript'></script>
<div id='flashcontent'></div>
<script type='text/javascript'>
var so = new SWFObject(" ...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>

Al posto di ...swfobject.js e di ...blogumus.swf vanno incollati gli URL dei due file caricati nella cartella Public di Dropbox o su Google Code.




8 commenti :

  1. purtroppo non mi funziona, mi dice "The content of elements must consist of well-formed character data or markup."

    RispondiElimina
    Risposte
    1. @ManiNellaTerra
      Prova adesso. Windows Live Writer per W8 mi aveva creato degli spazi nei del codice che ora ho tolto. La demo funziona quindi non ci dovrebbero essere problemi.

      Elimina
  2. Spiegazione chiara e precisa...
    sono un pò arrugginita con l'htm ma funziona perfettamente.
    Grazie mille

    RispondiElimina
  3. Funziona perfettamente e alla grande, però crea interferenze con Lightbox, hai qualche suggerimento? In pratica quando visualizzi un immagine la nuvola rimane in primo piano. vorrei farti vedere, ma mi sa che non posso mettere qua il link senza essere considerato spam.. (barzellettehumor blogspot)
    Grazie in anticipo!

    RispondiElimina
    Risposte
    1. @# I link possono essere incollati, non possono essere resi cliccabili. Comunque è una questione di z-index di difficile se non impossibile soluzione a meno di non disattivare il Lightbox di Blogger che si fa dalla Bacheca.

      Elimina
    2. Ok mi rassegno! se lo dici tu che è difficile, non mi sogno nemmeno di metterci le mani, dura la scelta però! forse spostare la nuvola da qualche parte dove non possa interferire.. mumble mumble.. :)
      Intanto grazie mille e complimenti! facile perdere ore nel tuo sito, ricchissimo di dritte utilissime!

      Elimina
    3. @# Prova quest'altra nuvola
      http://www.ideepercomputeredinternet.com/2012/04/come-installare-su-blogger-una-nuvola.html

      Elimina
    4. Provato, ma ho troppi tag.. la prima funzionava bene anche con 80 tag, questa non riesco neanche a visualizzarla. Grazie lo stesso!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.