Tag cloud animata per il blog

Qualche giorno fa ho ricevuto una mail da Stefy in cui mi chiedeva:

Sapresti dirmi dove trovare e/o come mettere nel blog un widget tipo quello nell'immagine allegata? (che vedete qui a fianco)

Questo widget è una tag cloud animata. Ecco le istruzioni per inserirla nel blog!

Prima di procedere ci tengo a precisare che il widget in questione non è mio. Si tratta di WP-Cumulus, creato da Roy Tanck e adattato per Blogger da Amanda Fazani.

Per aggiungere questo widget nel blog, dovreste scaricare dal sito ufficiale un file javascript (.js) ed uno flash (.swf) e caricarli su un servizio di hosting e infine inserire del codice html nel template che dovreste prima personalizzare nei colori e nelle dimensioni.

Per facilitarvi il tutto ho caricato su un mio dominio i due file necessari e ho creato una pagina attraverso la quale potrete personalizzare il vostro widget e prelevare il codice già modificato.

Backup del template

Per aggiungere questo widget nel blog occorre modificare il template, quindi prima di iniziare ricordatevi di fare il backup.

Codice html del widget

Modifiche al template

Il codice html che visualizzate nel box sopra riportato, ottenuto selezionando le dimensioni del widget e i colori che più si intonano con quelli del vostro blog, va inserito ora nel template.

Andate quindi in Blogger e cliccate su Design:

poi su Modifica HTML

ed infine su Espandi i modelli widget

Ora cercate questa riga di codice:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Come già detto altre volte i template non sono tutti uguali quindi se non trovate questa riga provate con quest'altra:

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

Se non trovate nemmeno questa, lasciate un commento e vi dirò con precisione cosa cercare.

Subito dopo questa riga del template incollate il codice html prelevato dal box e salvate il modello:

Visitando il vostro blog vedrete in alto nella sidebar come primo widget una tag cloud animata tipo questa:

Modifiche del widget

Vediamo ora quali modifiche si possono apportare al widget e quali no.

Come detto in precedenza il widget comparirà in alto nella sidebar; se volete che sia visibile in un'altra posizione andate in Blogger - Design e trascinate il widget Etichette nella posizione desiderata.

Per apportare altre modifiche al widget cliccate sul link Modifica del gadget oppure, se siete nel blog, sull'icona .

Nella finestra di configurazione potrete modificare il Titolo (ad esempio sostituendo "Etichette" con "Argomenti trattati", "Labels", "Tags" o ciò che più vi piace) e il numero di etichette da mostrare nel widget (tutte o soltanto alcune). Alla fine occorre salvare!

Vediamo ora cosa è consigliabile non modificare.

Se vi accorgete che le dimensioni che avete inserito per il widget non vanno bene per la vostra sidebar o se i colori che avete scelto non si intonano con il resto del blog, allora anziché modificare alcuni parametri presenti nel codice html che avete inserito nel template vi consiglio di eliminare il gadget (cliccando su Modifica o sull'icona ) e poi sul pulsante Rimuovi. Quindi prelevate nuovamente il codice e seguite tutte le istruzioni precedenti.

Conclusioni

Come detto all'inizio del post, per facilitarvi nell'inserimento di questo widget nei vostri blog ho caricato i file necessari su un mio dominio a pagamento e ho realizzato per voi la pagina che genera il codice.
Ci tengo a precisare che per una maggiore compatibilità del widget su tutti i browser, nonostante sul sito ufficiale fosse disponibile una versione più vecchia dello script, io ho caricato online l'ultima versione aggiornata e di conseguenza ho riscritto il codice utilizzando una sintassi diversa da quella utilizzata dall'autore del widget.
Chiunque utilizzi questo widget, lasci almeno un commento.
Un "Grazie" è sempre gradito!

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.