Pubblicato il 18/04/12e aggiornato il

Come installare su Blogger una nuvola animata di etichette.

Come inserire nei blog di Blogger una nuvola animata in flash di etichette (animated label-cloud).
La label-cloud animata è uno dei widget più amati dai blogger. Gli utenti della piattaforma Wordpress hanno a disposizione da tempo il plugin WP-Cumulus che fu anche riadattato per Blogger e a cui fu dato il nome di Blogumus. Questo gadget però non sempre si è dimostrato affidabile in quanto a funzionalità.

Passo a illustrare un metodo veramente semplice per creare una nuvola di etichette animata in flash senza aver neppure bisogno di modificare il modello. L'unica limitazione è che non si possono avere troppe etichette altrimenti il widget non riesce a caricarsi. Non si può dire quale sia il limite massimo ma certo non si può superare qualche decina di etichette.

La nuvola di tag verrà animata dallo spostamento del mouse e, cliccando sopra a una etichetta, si aprirà la pagina relativa che avrà un indirizzo di questo tipo
http://nome-blog.blogspot.com/search/label/nome-etichetta

nuivola-animata-etichette


L'etichetta puntata dal cursore mostrerà un effetto hover colorandosi in modo diverso e mostrandosi all'interno di un rettangolo. Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice seguente in Sezioni del sito (il titolo è opzionale)

<div id="labelcloudanimata"></div>
<script type="text/javascript">
/*<![CDATA[*/
var labelcloudanimata = {
    blogurl        : "http://verypretty-blog.blogspot.com",
    color          : "D84938",
    hoverColor     : "008250",
    backgroundColor: "FFFFFF",
    size           : 14,
    speed          : 80,
    width          : 280,
    height         : 320,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://www.guadagnareconadsense.net/upload/labelcloudanimata.js"></script>

Si salva e si posiziona il widget mediante il drag & drop quindi si salva nuovamente.


Le personalizzazioni sono state colorate di rosso e riguardano
  1. L'URL del nostro blog da incollare senza slash finale
  2. Il colore delle etichette (D84938)
  3. Il colore delle etichette quando ci passa sopra il cursore (008250)
  4. Il colore dello sfondo del widget (FFFFFF) da adattare a quello del blog
  5. La dimensione dei caratteri delle etichette (14 pixel)
  6. La velocità di spostamento delle etichette (80)
  7. L'inserimento o meno dell'effetto trasparenza (true o false)
  8. Le dimensioni del widget (larghezza 280 e altezza 320) per adattarle a quelle della sidebar
Fonte | Way2Blogging -




28 commenti :

  1. ciao Ernesto spero tutto bene,
    torno ad intasarti coi miei commenti. Ho un problema con i pulsanti facebook, twitter etc sul mio sito: www.iconadeironchi.com posti sopra ad ogni post (e volutamente non visibili nelle pagine).
    Si visualizzano tutti correttamente come puoi vedere, ma non sono cliccabili e non riesco a capirne il motivo.

    Qui il codice html che ho usato per inserirli: http://freetexthost.com/6x21mduwix

    grazie in anticipo come sempre

    RispondiElimina
  2. ciao! volevo chiederti una cosa...
    è possibile scegliere quali etichette mostrare nella nuvola?
    grazie! :)

    RispondiElimina
  3. @GaiaVincenzi
    Invece di incollare il codice sopra alla riga

    <div class='post-body entry-content'>

    incollali sotto, cioè sopra alla riga

    <data:post.body/>

    e vedrai che funzioneranno
    P.S. Ti prego di inserire un solo commento riguardo allo stesso tema. Non importa che mi posti lo stesso commento sotto un altro articolo. Sono considerati da Google come contenuti duplicati e devo toglierlo. Se qualche volta non ti ho risposto può darsi che mi sia sfuggito ma mi capita di rado.

    @PadovaEventi
    Per questa nuvola non è possibile ma c'è un'altra versione
    http://www.ideepercomputeredinternet.com/2011/03/blogumus-per-blogger-ovvero-il-widget.html
    in cui si possono scegliere fino a 30 etichette.

    RispondiElimina
  4. ciao Ernesto grazie per la risposta,
    ma così poi me li sposta sotto all'immagine del post:
    http://i43.tinypic.com/vcucmf.png

    quando invece io vorrei mantenerli qui e cliccabili:
    http://i44.tinypic.com/2d8g6fd.jpg

    (lascia stare il pulsante fb che su qst pc è bloccato)

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Sei sicura di non aver sbagliato? Devi inserire il codice dei bottoni sopra< data:post.body/ >.
      Se hai fatto così e ti vanno a finire sotto l'immagine del post è cosa davvero molto strana. Prova a mettere il codice dei bottoni all'interno di un paragrafo cioè con questa sintassi
      <p>Codice pulsanti</p>
      magari inserisci anche un salto di riga in questo modo
      <p>Codice pulsanti</p><br/>
      Però per rendere i pulsanti cliccabili vanno inseriti dentro il contenuto del post e cioè dopo la riga
      <div class='post-body entry-content'>

      Elimina
    2. ciao Ernesto Grazie, ho apportato questa ultima modifica mettendolo dopo il < data:post.body/ >, come puoi anche vedere qui: http://freetexthost.com/pihpzj32ca , e funziona, ora sono cliccabili.

      l'unica cosa che nn mi spiego è che il widget Bloglovin, che ieri (con lo stesso identico codice, ma posto sotto al < data:post.body/ > si vedeva in png senza sfondo (come puoi vedere qui:
      http://i44.tinypic.com/2d8g6fd.jpg
      ora invece appare così.. :

      (ho già inserito il "border:0" come puoi vedere nel file di testo (è l'ultimo corpo di codice) ma non fa nulla..rimane così:
      http://i39.tinypic.com/5fisro.jpg

      non so più come scervellarmi..tutte le cose strane a me..!

      Elimina
    3. @GaiaVincenzi
      Per fare una cosa più professionale prova a mettere tutti i bottoni dentro una tabella
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      Puoi anche regolarne la distanza da quelli adiacenti e dal top del post in modo da allinearli perfettamente.

      Elimina
  5. Risposte
    1. @CINETIK
      Forse hai un numero di etichette troppo alto, prova questo
      http://www.ideepercomputeredinternet.com/2011/03/blogumus-per-blogger-ovvero-il-widget.html

      Elimina
    2. questo sembra non funzionare a prescindere [vedi demo]. Grazie comunque.

      Elimina
    3. @CINETIK
      La Demo su Chrome funziona...

      Elimina
    4. si vero, hai ragione su chrome funziona, ma per farlo funzionare sul mio blog dovrei togliere un bel po di etichette, e non posso propio. Vabbè fa niente.

      Elimina
  6. Ciao Ernesto , ho provato e funziona . L'unica cosa mi appare però,oltre alle etichette , anche il codice del widget . Come faccio a non farlo apparire ?
    Ed inoltre : è possibile mettere le etichette anche ai post inseriti nelle pagine pagine del mio blog ? Grazie e buon lavoro

    RispondiElimina
    Risposte
    1. @SMS...
      Se ti appare anche il codice vuol dire che hai sbagliato a copiare o a personalizzare i parametri. Ho controllato e il codice funziona. Nelle Pagine non possono essere inserite etichette, queste vanno messe solo nei post.

      Elimina
  7. Grazie !!! Avevo fatto qualcosa di sbagliato io . Buon lavoro

    RispondiElimina
  8. Ciao . come posso sfruttare la colonna di destra che nel mio blog appare desolatamente vuota ? (smsdirittoedoveri.blogspot.com) Grazie ancora Ciao

    RispondiElimina
    Risposte
    1. @SMS..
      Guarda che come consigli sulla grafica sono proprio scarso ;) Comunque nello spazio oltre le sidebar in blogger si possono mettere solo widget flottanti o slide, non è possibile inserire un gadget "normale".

      Elimina
  9. Grazie . sei stato d'aiuto ,e direi assolutamente non scarso . Senti è possibile che il mio gadget nuvola etichette ,debba essere riavviato ? Cioè ,sono entrato oggi nel blog e non compariva .... entrato in layout , controllato e risalvato è riapparso ....
    ???? Ho sbagliato qualcosa ??? Provato sia con Firefox 12.0 che con Chrome . Grazie . Ciao

    RispondiElimina
    Risposte
    1. @SMS...
      Se funziona lascialo come è :)

      Elimina
    2. Non è che non funziona , è che dopo un paio d'ore sparisce dal blog . Bisogna ritornare in layout andare nel widget e dare nuovamente salva . A quel punto torna a funzionare(torna visibile). Però non è un funzionamento corretto.
      Grazie . Ciao

      Elimina
  10. Questo era molto bello da inserire e mi farebbe risparmiare un po di spazio...ma non mi funziona ne il precedente hai postato ne levando widget delle etichette...che vada copiato in qualche altro punto????

    RispondiElimina
    Risposte
    1. @IvanDEfelice
      Il gadget HTML/Javascript lo puoi mettere ovunque però dubito che dipenda da quello

      Elimina
  11. Ciao Ernesto,
    ho un piccolo problema al quanto strano.
    Praticamente, se lascio invariato il "blogurl" del codice da te proposto il tutto mi si vede, non appena metto il mio url non si vede più un fico secco O.o!
    Ho pensato: "forse ho una marea di etichette e questo gli crea problemi"; allora, per sincerarmi che il problema fosse di altra natura, l'ho aggiunto nel blog di mio cugino (che ha 3 etichette in croce) e idem con patate: con il blourl di default tutto è ok, appena modifico l'url non si vede più!
    Tu hai idea a cosa possa essere attribuito tutto ciò?
    Ti ringrazio anticipatamente.

    Un caro saluto
    Marco

    RispondiElimina
  12. Ah, un ultima cosa: il fatto che, in movimento, le etichette trasbordino ai lati è dovuto alla quantità delle stesse, dico bene?

    Saluti

    RispondiElimina
    Risposte
    1. @ Marco...
      Al massimo possono essere selezionate 30 etichette. Prova a salvare questo file
      http://www.guadagnareconadsense.net/upload/labelcloudanimata.js
      in formato .js e a caricarlo su DropBox. Se il numero delle etichette è nella norma dovrebbe funzionare.

      Elimina
    2. Uhmmm, fatto...non è cambiato nulla. Ho provato a fare anche qualche smanettamento vario all'interno dello js, prima di salvarlo sul DropBox, ma non c'è verso mannaggia! Scusa, ma per selezionare le 30 etichette devo rimettere nuovamente il widget di blogger delle etichette?
      Grazie per la risposta super celere :)!

      Elimina
    3. @ Marco Michele C.MI
      Non è che sono un mago. Io mi sono limitato a testare il funzionamento del widget. Ho visto per esempio che in questo blog non funziona dato il gran numero di etichette ma non sono in grado di dire a priori se funzionerà o meno da un'altra parte. E' chiaro che le etichette devono essere limitate prima di provare a installare il widget.

      Elimina
    4. Mai pensato, figurati, anzi, mi pare che tu faccia già un gran bel lavoro!
      Allora proverò a lavorare sul numero di etichette...grazie comunque per l'attenzione e per le risposte celeri!

      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.