Ricardísimo

Nube de tags animada

// November 18th, 2008 // tuts

Mucha gente me ha escrito desde que cambié el diseño del blog para preguntarme sobre la nube de tags (etiquetas) que puse en el menú de la derecha. Debido a que me da pereza responder todos los correos y, suponiendo que todos los que me escribieron fue porque leen mi blog, entonces voy a explicar cómo la hice. El diseño se puede cambiar por uno que les guste.

Voy por pasos:

1. Vamos al panel de blogger y luego a “Editar HTML“.
2. Sin expandir la plantilla de artilugios buscamos el siguiente código:

<br /><b:section class=”‘sidebar’” id=”‘sidebar’” preferred=”‘yes’”><br />
3. Justo después de esa línea que encontramos, pegamos este código:

<br /><b:widget id=”‘Label99′” locked=”‘false’” title=”‘Etiquetas’” type=”‘Label’”><br /><b:includable id=”‘main’”><br /> <b:if cond=”‘data:title’”><br /> <br /> <h2><data:title/></h2> <p> </b:if><br /> <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” ><br /> <param name=”movie” value=”http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf” /><br /> <param name=”bgcolor” value=”#ffffff” /><br /> <param name=”flashvars” value=”tcolor=0×000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags><br /> <b:loop values=”‘data:labels’” var=”‘label’”><br /><a dir=”‘data:blog.languageDirection’” href=”‘data:label.url’” mce_href=”‘data:label.url’” style=”’12′” mce_style=”’12′”><data:label.name/></a><br /></b:loop><br /></tags>” /><br /> <p>Blogumulus por <a href=’http://www.roytanck.com/’>Roy Tanck</a>, <a href=’http://www.bloggerbuster.com’>Amanda Fazani</a> y <a href=’http://ricardisimo.com’>Ricardísimo</a></p><br /> </object> </div> <p> <b:include name=”‘quickedit’/”><br /></b:includable><br /></b:widget><br />
4. Con esto ya podremos ver la nube de etiquetas en el blog.

Para editar los parámetros que vienen preestablecidos hay que cambiar algunas partes del código:

El ancho (240px), el alto (300px) y el color de fondo(#ffffff):

<br /> var so = new SWFObject(“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”, “tagcloud”, “240″, “300″, “7″, “#ffffff”);<br />
El color del texto (#333333 sin borrar “0x”)

<br /> so.addVariable(“tcolor”, “0×333333″);<br />
El tamaño del texto (12)

<br /> so.addVariable(“tagcloud”, “<tags><b:loop values=”‘data:labels’” var=”‘label’”><a href=”‘data:label.url’” mce_href=”‘data:label.url’” style=”’12′” mce_style=”’12′”><data:label.name/></a></b:loop></tags>”);<br />
Esto sería todo. Cualquier cosa me preguntan.