Blogumus » Nube de etiquetas en movimiento

Hoy vamos a ver cómo crear una nube de etiquetas con un efecto muy especial, pues las etiquetas están en movimiento, tal como pueden apreciar si pasan el mouse sobre la imagen.

Ahora vamos a ver como pueden hacer para conseguirla siguiendo los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y buscamos el siguiente código:

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

2.§ Debajo del código que buscamos en el punto 1.§ , pegaremos el siguiente código:

<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'>



    &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='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='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>

Antes de guardar vemos si ha quedado bien en Vista previa, y luego damos click a Guardar!

3.§ Este paso es opcional, la nube funcionará correctamente con los pasos anteriores, este paso sólo es para personalizar un poco la nube.
La nube que instalamos, tiene los siguientes valores o características que podremos modificar, tal como se indica teniendo, en cuenta que sólo deberemos de modificar lo que está en cursiva:

• El ancho es 250px, para cambiarlo buscaremos en el código width="250"


• La altura es 200px, para cambiarlo buscaremos height="200"


• El color de fondo es blanco, para cambiarlo buscaremos value="#ffffff"


• El color de texto es negro, para cambiarlo buscaremos value="tcolor=0x000000&


• El tamaño de letra es 12, para cambiarlo buscaremos style='12'

Y éso sería todo, si hay alguna duda o problema estaré gustosa de ayudarlos.

Referencia : Blogger Buster