Seguramente ya habrán visto por varios blogs que ponen sus etiquetas en una nube. Hoy les voy a enseñar no solo eso, sino que además la nube va a ser en movimiento, para que cuando pasemos el mouse por sobre ella las diferentes etiquetas vallan desplazándose, lo que le da un toque muy atractivo.

El truco es muy fácil de realizar. Primero nos dirigimos a la Edición HTML de nuestra plantilla (recuerda guardarla antes de hacer cualquier cambio) y buscamos el siguiente código:

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

Luego vamos a pegar el siguiente código debajo de la línea que buscamos recién:

<b:widget
id='Label50' locked='false' title='Nube de etiquetas'
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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;,
&quot;tagcloud&quot;, &quot;240&quot;,
&quot;300&quot;, &quot;7&quot;,
&quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;,
&quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;,
&quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;,
&quot;tags&quot;);
so.addVariable(&quot;distr&quot;,
&quot;true&quot;);
so.addVariable(&quot;tspeed&quot;,
&quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;,
&quot;<tags><b:loop values='data:labels'
var='label'><a expr:href='data:label.url'
style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;,
&quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Por defecto la nube presenta estás características:

• Width (ancho) 240px
• Height (alto) 300px
• Color de fondo blanco
• Color de texto gris
• Tamaño de la fuente del texto "12"

Cambiar el ancho (240px), el alto (300px) y el color (#ffffff) de la nube:

var
so = new
SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "240", "300", "7", "#ffffff");

Cambiar el color del texto (333333 manteniendo delante el 0x tal cual está):

so.addVariable("tcolor", "0x333333");

Cambiar el tamaño del texto (12):


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>");

Como verán el resultado es muy bueno, ya que le da a nuestro blog un toque distintivo muy especial.