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("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</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:
Te tengo en mi lector de feeds y lo que pones me gusta. No todo lo ocupo, pero mirar novedades ya es bueno.
Gracias Alemamá, he tenido descuidado el blog este verano pero intentaré seguir añadiendo entradas que puedan interesar. Un saludo.
MUCHAS GRACIAS, CONSEGUI PONER LA NUBE Y ME GUSTO MUCHO. SOY PRINCIPIANTE, PERO ESTOY APRENDIENDO
GmanCHO me alegro. Saludos.
millones de gracias, me encanta esta nube de etiquetas y realmente los has hecho facil para mi.
Graciassssssss
La Griega, me alegro que te gustara. :)
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...
fire:
Me temo que para eso habría que modificar el fichero swfobject.js original.
Saludos.
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.
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
gracias. lo probaré.
funciona muy bien, gracias
Claudio, me alegro. Saludos.