Blogumus, un label cloud animato per Blogger

Questo simpatico widget da aggiungere al proprio blog ha talmente spopolato che non mi stupirebbe se col tempo soppiantasse per sempre il vecchio label cloud statico. Blogumus è un widget per Blogger che vi permetterà di visualizzare le etichette dei vostri post in una sfera tridimensionale che reagirà al passaggio del mouse dell'utente.

Il plugin è stato realizzato da Roy Tanck per Wordpress e l'autrice di Blogger Buster ha trovato un modo per visualizzarlo anche su Blogger. E' totalmente personalizzabile e l'installazione richiede pochi minuti.

Aggiornamento: il codice che presento in questo post ha qualche problema con Internet Explorer, ne ho pubblicato una nuova versione qui.

Installazione e personalizzazione del widget

Dopo aver fatto una copia di sicurezza del vostro template, da Layout->Modifica HTML, selezionate "Espandi i modelli widget" e cercare la seguente riga di codice:

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

Subito sotto, incollate questo codice html:

<b:widget id='Label99' locked='false' title='Categorie' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
        &lt;param name="bgcolor" value="#ffffff" /&gt;
        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
      <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>
&lt;/tags&gt;" /&gt;
        &lt;p&gt;Blogumulus by &lt;a href='Roy">Roy">http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='Amanda">Amanda">http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
    &lt;/object&gt;
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Personalizzando le parti in verde così:

• Categorie è il nome dell'oggetto
• 250 e 200 sono rispettivamente larghezza e altezza dell'oggetto, modificatele per adattarle al vostro template
• ffffff e 000000 sono rispettivamente il colore di sfondo e quello del testo delle etichette, secondo la codifica RGB
• 12 è la dimensione del carattere

Una volta fatto, potete salvare il template. In Layout->Elementi pagina, troverete un nuovo elemento che potete posizionare dove più vi piace. Visualizzando il blog, potrete già vederlo in azione. Potete anche far convivere il vecchio widget di Blogger per la visualizzazione delle etichette con Blogumus, senza che vadano in conflitto. L'oggetto si aggiornerà automaticamente quando verranno aggiunte nuove categorie di post.

Problemi noti

• A me è successo, e non solo a me, che alcune categorie non fossero visualizzate. Può succedere se nella categoria c'è un solo post.
• Al posto dell'oggetto potrebbe comparire un'area bianca senza niente. Potrebbe essere un errore del codice del template, nella versione di Flash che avete installata nella vostra macchina o nei JavaScript disabilitati.
• Potrebbe succedere che cliccando sull'etichetta non succeda niente: questo è principalmente un problema di browser. Io l'ho testato con Firefox 3, Chrome e Internet Explorer 8, senza problemi. Non so come si comporti Opera, per esempio, o con le versioni più vecchie dei browser che ho citato.