Tag Cloud animata per Blogger Blogspot
Inserire una Tag Cloud animata in Blogger Blogspot.
Blogumus è una Tag Cloud particolare, che utilizza una animazione in Flash per visualizzare le etichette (tags) del tuo blog su Blogger. Se non la conosci ancora, puoi vederla in azione sulla sidebar di questo blog.
Una volta installata all’interno del tuo template, dovrebbe funzionare anche senza ulteriori modifiche, ma ovviamente è possibile cambiare il colore, lo sfondo e le dimensioni del carattere.
Ti ricordo che, se invece preferisci una Tag Cloud standard puoi visualizzare la mia guida Inserire una Tag Cloud per Blogger.
Attenzione:
1: Il widget è testato e funzionante con Firefox, ma potrebbe non essere visualizzato correttamente con Internet Explorer.
2: Il numero di etichette non deve essere eccessivo altrimenti il widget potrebbe non essere visualizzato correttamente: suggerisco una quantità di etichette non superiore a 30.
3: Le etichette non devono contenere caratteri speciali, del tipo apostrofi, virgolette, trattini (' " -). In caso siano presenti in una delle etichette, il widget potrebbe non funzionare. Vanno bene le etichette costituite solo da lettere e numeri.
Prima di procedere spazio ai credits: "Blogumus" è una tag cloud animata realizzata da Roy Tanck ed adattata per Blogger da Amanda Fazani di Blogger Buster.
Ecco i passi necessari per l'installazione di Blogumus su Blogger:
Vai in Layout> Modifica HTML, clicca su “espandi modelli widget” e cerca la seguente riga (o qualcosa di molto simile):
<b:section class='sidebar' id='sidebar' preferred='yes'>
Attenzione: a seconda del template che stai utilizzando nel tuo blog potrebbe esserci una riga diversa dalla precedente. Tieni presente che potresti avere un template che ha 2 sidebar, ad esempio sinistra e destra, quindi avrai un diverso valore per ‘id=’. In ogni caso potrai successivamente spostare il widget da una sidebar all’altra come un qualsiasi altro widget tradizionale, quindi non preoccuparti troppo di dove lo posizioni la prima volta.
Subito dopo di essa incolla il codice seguente:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Adesso osserva il modello in Anteprima, prima di salvarlo. Se installata correttamente, dovresti vedere la tag cloud animata apparire in cima alla tua sidebar.
Prima di salvare il modello possiamo già configurare il widget.
Le variabili per la larghezza e l'altezza si trovano in questa linea dello script:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
La larghezza (attualmente 240) è evidenziata in rosso, mentre l'altezza (300px di default) è evidenziata in blu.
È possibile cambiare il colore di sfondo da bianco a qualsiasi altro colore, modificando il valore esadecimale nella stessa linea: #ffffff. Ad esempio, se si preferisce uno sfondo rosso, si può sostituire #ffffff con #ff0000. Date un'occhiata a questa pagina per visualizzare un elenco di codici esadecimali html per i colori.
Per rendere lo sfondo del widget trasparente eliminate // dalla riga seguente:
//so.addParam("wmode", "transparent");
Allo stesso modo il colore del testo , che di default è grigio (#333333), può essere modificato a piacimento modificando la riga:
so.addVariable("tcolor", "0x333333");
L’unica cosa da modificare in questo caso è il numero in rosso senza #.
La massima dimensione del carattere della tag è specificata in questa riga:
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>");
È possibile modificare questo per garantire che le tag siano visualizzate in un carattere più piccolo o più grande se si preferisce, modificando "12" con un numero più grande o più piccolo.
Godiamoci la nostra originalissima Tag Cloud animata su Blogger Blogspot.
Aggiornamento:
Installazione alternativa per coloro che riscontrano problemi di visualizzazione per il Tag Cloud animato Blogumus.
Prima di tutto andate in Layout->Modifica Html, ma NON cliccate su "espandi modelli widget".
Cercate una riga molto simile alla seguente:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Subito dopo di essa incollate il seguente codice:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Adesso cliccate su anteprima per vedere il risultato. In caso non ci siano problemi potete salvare il modello.
Note aggiuntive: Dovete necessariamente dare un nome alla Tag Cloud, altrimenti non funzionerà correttamente.
Sono mesi che cerco di mettere questo widget ma ogni volta c'è qualcosa che nono va, stavolta l'errore è :
Messaggio di errore XML: The element type "b:section" must be terminated by the matching end-tag "".
Aiutoooooooooo!!
the Tramp
Hai cliccato su “espandi modelli widget” come scritto nella guida?
Segui tutti i passaggi da zero, deve funzionare.
Fammi sapere.
Seguito i passaggi da zero, anche a me blogger dice :
Messaggio di errore XML: The element type "b:section" must be terminated by the matching end-tag
Ciao, avete ragione c'era un errore nel codice, adesso è stato corretto. Fatemi sapere.
Penso che questa applicazione ce l'abbia con il mio blog: adesso mi compare un riquadro bianco e basta.Comincio a demordere.
The Tramp, ho appena testato la guida su un blog di prova, e ti assicuro che adesso funziona.
Se visualizzi un quadrato bianco magari devi proporzionare meglio il widget. Prova a cambiare le dimensioni, ad esempio prova i valori larghezza 200 lunghezza 250.
Niente da fare, ho provato anche 180 e 180, ma il risultato è sempre un quadrato bianco.
Ciao, il tuo blog mi è stato di molto aiuto per diverse cose...ora però ho dei problemi: io avevo già il tag cloud non animato che ho inserito con successo grazie alle tue indicazoni, adesso volevo togliere quello non animato e mettere questo. Il problema è che non trovo da nessuna parte la riga
che hai scritto! quella che + ci assomiglia è questa:
:section class='header' id='header' maxwidgets='1' showaddelement='no'
adesso ho eliminato il gadget etichette, ma nel codice html leggo ancora il codice del cloud non animato...e se provo a toglierlo mi da errore...
Se mi puoi dare una dritta te ne sarei molto grato! Grazie infinite!
come non detto...si vede che ierinotte ero un pò fuso ^_^
Ho trovato la riga in questione e ho inserito il codice e.. funziona!
Grazie ancora!!
non funziona neanche a me
Vi ricordo che affinchè il widget in questione funzioni dovete aver già creato delle etichette. Lo dico perchè ho visto che alcuni di coloro che hanno problemi, non le hanno nel loro blog!
Inoltre vi consiglio di indicare il nome del template che state utilizzando, e i passaggi fatti.
Avviso per coloro che hanno problemi di visualizzazione con il Tag Cloud Animato: ho aggiornato ulteriormente la guida includendo una installazione alternativa.
Provatela e fatemi sapere.
Niente... ecco quello che compare sul mio blog: "Blogumulus by Roy Tanck and Amanda Fazani". Io le tags le ho e ho il modello del tuo post precedente.
Anonimo,
un problema come il tuo può presentarsi solo nel caso in cui non si abbia Javascript e/o Flashplayer installati ed attivi.
Provvedi.
Scusami anche io ho i problemi degli amici precedenti. Con la prima versione appare solo la scritta by ecc., con la 2° versione (non espandi widget) solo un quadrato bianco, anche modificando le misure.
Ho provato e riprovato ma nulla (può dipendere dal numero eccessivo di etichette??). Ti ringrazio e ...buona domenica
@Mary47
Hai un bellissimo blog.
Ho notato che (ad occhio e croce) hai circa 800 etichette!
Sono decisamente troppe per questo widget. E' difficile che possano essere visualizzate tutte all'interno del Tag Cloud animato.
Inoltre anche se aumenti le dimensioni del widget avrai difficoltà di lettura.
Grazie JS della tua disponibilità!
Lo supponevo e perciò rinuncio (ma le etichette non si cancellano, rimangono a vita?)
Grazie e buona serata!!
mary47
Le etichette non si possono eliminare direttamente.
Puoi farlo modificando i singoli post, andando ad eliminare l'associazione tra post ed etichetta.
Ciao!
Il tuo blog è davvero ben fatto: molto utile a noi piccoli utenti spaesati... Davvero complimenti! ^^
Ho seguito alla lettera le tue indicazioni, e pare tutto funzionante... Solo un dubbio: io ho attualmente quattro etichette, ma non vengono mai visualizzate tutte e quattro, ma sempre e solo tre, che variano credo a seconda dei post che visualizzo, o secondo un qualche altro parametro che disconosco... Insomma: a turno ne manca sempre una... C'è un modo per renderle sempre tutte presenti?
Grazie mille!
Ti rinrazio JS, sei molto disponibile.
A rileggerti!
Nereide
Grazie, il tuo blog è spettacolare.
Non capisco il tuo problema. Hai detto che il Tag Cloud funziona.
Parli delle etichette visualizzate assieme ad ogni singolo post?
Grazie JS, molto gentile.
Si, funziona tutto...
Il problema è il seguente: attualmente ho sette etichette in totale, ma nel tag cloud ne spuntano solamente sei... Inoltre la mancante non è sempre la stessa...
Una volta ne manca una, una volta ne manca un'altra, a rotazione... E non capisco da cosa possa dipendere...
Resta il fatto che per n etichette, ne "ruotano" sempre n-1, e la mancante varia sempre tra le totali...
Volevo capire se era normale, o se manca qualcosa nel codice.
Ti ringrazio molto della disponibilità! :)
Nereide
Credo si tratti di un bug, o di una leggera incompatibilità tra il widget ed il template che utilizzi.
Potresti segnalare il problema all'autrice dello stesso widget Amanda Fazani di Bloggerbuster.com
Puoi anche provare a modificare lievemente le tre etichette incriminate, ad esempio passando dal singolare al plurale o viceversa. Ma ovviamente non ti garantisco che la cosa si risolva. Potresti anche provare su un blog temporaneo di prova.
http://files3.jetbytes.com/4d3ae17324c698f273a93efcdf72fc9b
tag_cloud.rtf
con questo sembra che mi funzioni ;)
(testato con safari)
ciao... ho inserito il widget seguendo le istruzioni. Pur avendo le etichette non me ne visualizza nemmeno una.. potrebbero essere già troppe?
A me piacerebbe fossero anche solo le etichette più cercate.. non necessariamente tutte. Grazie per la disponibilità.
Cy
Ciao, sono Leonardo!
Ti ringrazio per la guida: ora anche sul mio blog (leonardocolombi.blogspot.com) c'è un widget fico per le etichette ^_^
@ cy
Ciao, hai provato l'installazione alternativa?
Vale quanto detto in precedenza, ovvero le etichette potrebbero essere troppe per avere una buona visualizzazione.
Scusa il ritardo nella risposta, a presto.
Come han scritto nei commenti precedenti le altre persone, anch'io riscontro il seguente problema: dopo aver seguito tutto alla lettera, nel mio blog appare solo uno spazio bianco con in alto a sinistra la parola Labels. Cosa devo fare affinchè mi compare questa benedetta tag cloud?
@ Nunzio
Hai 113 etichette sul blog, probabilmente il widget non riesce a gestirne così tante.
Se mastichi un po di inglese prova questo tag cloud alternativo: http://www.tagcloud-generator.com
Ciao
Ti ringrazio per l'aiuto! Sei stato davvero utile.
Ciao e alla prossima.
Chiedo Scusa, poichè come detto in precedenza, non riesco ad inserire questa Tag Cloud animata, per il troppo numero di etichette, non è possibile, anzichè averle una sottostante all'altra in verticale, che portano via un enorme spazio , sistemarle una di seguito all'altro ma in orizzontale, magari quelle più presenti in grassetto e con grandezza font maggiore?
Chiedo troppo?
Grazie mille!!
Davvero utile!!
Grazie, riuscito al primo colpo. Però mi piaceva di più quella non animata, infatti alla fine ho messo quella! Alla prossima!
@ Mary47,
Se vuoi, puoi mostrare solo alcune delle etichette, quelle che preferisci!
Infatti se ti posizioni con il mouse su una delle tue etichette noterai nella barra di stato del browser (Firefox o Explorer) un link: esso ci porta ai post che contegono tale etichetta.
Sfruttiamo questo trucco per creare una selezione di etichette a nostro piacimento.
Basta cliccare con il tasto destro sull'etichetta prescelta e copiare il link (su Firefox cliccare su "copia indirizzo").
Ripeti questo procedimento per tutte le etichette che ti interessano, copiando tutto nel blocco note.
Adesso trasformiamo questa lista di link in una lista di etichette.
Vai in Layout->Aggiungi un Gadget->Elenco di Link
Nella configurazione del gadget imposta come segue:
"URL nuovo sito" = il link dell'etichetta scelta
"Nome sito nuovo" = l'etichetta (ovvero il suo nome)
Clicca su "aggiungi link", e ripeti per tutte le etichette. Infine salva.
Ti ringrazio. Appena posso lo faccio!
Buona giornata!
Abbiamo una proposta interessante per te
ciao, avrei bisogno di un tuo aiuto.
ho provato a mettere questo widget sia sul mio blog di prova che su quello "uffiale", risultato sul blog di prova funziona benissimo, sul quello ufficiale si vede solo una finestra bianca.
ti dico che il template è lo stesso, credevo fosse per il numero elevato di atichette quindi in quello di prova le ho aumentate, risultato si continuano a vedere anche se sn tante.
hai una soluzione?
p.s.
ho provato entrambi i modi di installazione.
p.s.2
complimeti per il blog lo trovo molto utile grazie
Per avere un riscontro oggettivo dovresti creare sul blog di prova esattamente lo stesso numero di etichette che hai sul tuo blog ufficiale, e vedere se la tag cloud funziona. Purtroppo è abbastanza faticoso creare tutte quelle etichette, e in ogni caso probabilmente non riuscirai comunque a capire dove stà il problema.
Se il problema è il numero elevato di etichette, l'unica soluzione sarebbe eliminarne alcune. Ma ovviamente non è facile farlo.
Hai provato il Tag Cloud Standard?
non lo ho ancora provato in settimana vedo un pò grazie per ora ti faccio sapere com'è andata ;)
ciao, allora ho provato anche con llo standard e il risultato è questo "Messaggio di errore XML: The element type "b:section" must be terminated by the matching end-tag ""."
Anch'io mi sono fatta tentare :)
funziona ma non benissimo... mi spiego: ho solo 3 etichette ma me ne mostra sempre solo due, le alterna a suo piacimento :D se ti va guarda stesso tu nel mio blog ho pochissimi post, perchè è da poco che l'ho inaugurato. Così forse potrai aiutarmi :)
comunque ti ringrazio è interessantissimo il tuo blog, così ho messo il link nel mio blog ;)
sonia
@ Sonia A
Il problema da te riscontrato è dovuto ad un bug (difetto) di WP-Cumulus (il nome originario della tag cloud): in particolare la versione 1.20 utilizzata per Blogumus.
Ho provveduto a caricare on-line la versione precedente 1.19, che non dovrebbe presentare il bug.
Per provare questa versione, procedi come segue.
Anzitutto salva il template.
Vai in "modifica Html" clicca su "espandi widget".
Trova (CRTL+F) la segente stringa:
http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf
e sostituiscila interamente con la seguente:
http://antpasq.googlepages.com/tagcloud.swf
Clicca su anteprima e verifica se il numero di etichette che visualizzi è corretto.
In caso affermativo Salva.
Fammi sapere se il trucchetto funziona, così aggiornerò la guida.
@ Pennywise
Se le tue etichette contengono caratteri speciali tipo (- ' " \ eccetera) il widget potrebbe non funzionare.
(Scusa il ritardo per la risposta)
Ciaooooooo e grazieeeeee!!!!! funziona benissimo, puoi aggiornare la guida!! sei bravissimoooo!! e poi rispondi ai post anche velocemente... cosa che fanno in pochi!!! complimenti, consiglierò questo blog a tutti i miei amici ed amiche! grazie infinite!!
sonia.
le mie etichette di strano contengono solo una à e un .
tranquillo nessun ritardo nella risposta, sei un grande ;)
cmq penso che rinuncio ho troppe etichette grazieeeeeee
Ciao e grazie per la guida.
ho però un problema sul mio blog, dove il widget funziona benissimo, vorrei far si che il colore del tag su cui passi con il mouse avesse un colore differente, per rendere più agevole la lettura, spulciando il codice però non ho trovato alcun riferimento utile ad un secondo colore e c'è solo quello del testo e basta.
Mi sai aiutare a riguardo o ci si deve arrangiare?
Grazie :D
Pennywise,
se ti và prova a modificare quelle 2 etichette... potresti risolvere il tuo problema.
Nadiamania,
Se mastichi un pò di inglese puoi trovare delle info su Wp-Cumulus sul sito del plugin:
http://wordpress.org/extend/plugins/wp-cumulus
viene un pastrocchio troppe etichette. peccato.
ti faccio una domanda, è possibile dividere in gruppi le etichette? cioè, se ho 9 tag è possibile fare 3 gruppi di tag da 3?
Purtroppo non è possibile farlo.
Se hai molte etichette ti conviene installare la tag cloud standard, almeno ciascuna etichetta sarà visibile.
ciao ho fatto come hai detto ma ho sempre un riquadro bianco...ho provato tutte e due i codici
Grazie
Le tue etichette contengono caratteri speciali (giapponese?) che mandano in tilt il widget.
Unica possibilità: modificare le etichette eliminando tali caratteri.
Grazie mille, (non so il nome), anche io erano da mesi che mi chiedevo se potessi inserire qualcosa di simile sul mio Blog, ora grazie a te l'ho scoperto e ci sono riuscito. Ciao!!
ciao JS!
io non trovo affatto la riga b:section class='sidebar' id='sidebar' preferred='yes'
nè tantomeno
b:section class='sidebar'
non ho sidebar? O.o
che peccato..sono mesi che cerco di mettere sta benedetta tag cloud animata...ma a quanto pare non è possibile col mio template!?
Fabri, cerca: sidebar-left
Saluti
grazie dell'attenzione!
purtroppo niente da fare...con entrambi i metodi visualizzo un riquadro bianco come altri utenti...però ho una trentina di tag e nessuna con caratteri speciali!
cosa potrà essere?
grazie Jack
Come ho scritto nella guida, le etichette non devono contenere caratteri speciali, del tipo apostrofi, virgolette, trattini (' " -).
Prova a modificare le etichette incriminate.
gli unici caratteri leggermente speciali sono le a accentate "à" ma ho visto che anche tu ce le hai...(ad esempio ho notato che hai come tag "pubblicità")... i requisiti descritti nella guida credo proprio siano tutti rispettati! :(
Infatti le lettere accentate vanno bene...
Della tua tag "condizioni d'uso" che te ne pare?
;-)
Jack scusa il ritardo nella risposta... il problema era quello, veramente grazie mille x avermi concesso la tua disponibilità e il tuo tempo! :D
L'ho appena piazzata sul mio blog.
E' proprio bella.
Grazie
Complimenti ho usato il secondo metodo per inserire la tag Cloud, ora funziona in 3 blog, l'unico problema che nn mi fa clikkare sui link. Come mai? Grazie per il servizio offerto
ps: con mozzilla però funziona
Wow, grazie pe le dritte, l'ho apena inserita nel mio blog, è bellissima!!! Non ho avuto nessun problema ad inserirla, ne a cambiare il colore del testo, chiarissime le tue istruzioni!!! Primi giretti qui nel tuo blog, ma credo che ci tornerò spesso. Grazie ancora. Cri.
complimenti per il tuo blog! molto utile! anche se io non comprendo tutti i suggerimenti :/
voglio informarti che uso google chrome e che non si vede niente di animato nel tuo blog da qui :(
buon lavoro!