Nube de etiquetas en movimiento

Se trata de cambiar la clásica nube de etiquetas estática por una en movimiento que se mueve según vamos apuntando con el cursor. Ver demo.

1. Buscamos esta línea de código:

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

2. A continuación de esa línea pegamos el siguiente código (la nube de etiquetas se mostrará al principio de la sidebar, después la moveremos donde queramos):


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

Para adaptarlos al estilo de nuestro blog, editamos alguna de las partes del código:

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

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):

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


Visto en: Blogger Buster
Idea original de: Roy Tanck

13 comentarios:

AleMamá

Te tengo en mi lector de feeds y lo que pones me gusta. No todo lo ocupo, pero mirar novedades ya es bueno.

jesgo

Gracias Alemamá, he tenido descuidado el blog este verano pero intentaré seguir añadiendo entradas que puedan interesar. Un saludo.

GmanCHO

MUCHAS GRACIAS, CONSEGUI PONER LA NUBE Y ME GUSTO MUCHO. SOY PRINCIPIANTE, PERO ESTOY APRENDIENDO

La Griega

millones de gracias, me encanta esta nube de etiquetas y realmente los has hecho facil para mi.
Graciassssssss

jesgo

La Griega, me alegro que te gustara. :)

fire

y se podria poner otro tipo de fuente?
tambien vi en algunos blog que las letras tienen dos tonos distintos...unno cuando se acercan...y otro cuando se alejan..
mi blog es
http://dejamequetecuente68.blogspot.com/
tengo la nuvbe puesta al principio...
un saludo..y gracias por estas ayudas...

jesgo

fire:
Me temo que para eso habría que modificar el fichero swfobject.js original.
Saludos.

Jaumefv

hola, he usado lo que comentas en esta tu entrada para mi blog. Pero hay algo que no funciona. Si quieres, míralo en mi blog. Lo he hecho todo tal como me dices, le he cambiado el color de fondo, y no salen las etiquetas. ¿Sabes decirme qué es lo que hago mal?
Gracias.

jesgo

Jaumefv>, parece ser que en ocasiones este script da problemas supongo que por el tipo de navegador. Te remito a esta entrada de Rosa en la que da un nuevo código para esos casos.
Espero que te valga. Saludos

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License