Vamos a aprender a insertar una nube de etiquetas (tambien llamadas tags) en formato flash/javascript, para crear un efecto animado muy vistoso. Probablemente las hayais visto ya, pues están de moda en el círculo de bloggers de Wordpress, y si no sabeis a que me estoy refiriendo, podeis ver un ejemplo en Webmasters Deluxe, en los paneles a la derecha de este artículo. Gracias a la gente de Bloggerbuster ahora tambien se puede añadir este widget a Blogger.
Comencemos. Solo nos llevará unos pocos minutos incorporarla a nuestro blog. Antes de nada hacemos una copia de nuestra plantilla en un lugar seguro, y una vez hecho esto seguimos los tres siguientes pasos;
1.- Buscar en nuestra plantilla la siguiente linea de código:
<b:section class='sidebar' id='sidebar' preferred='yes'>
2.- Añadir el siguiente código Despues.
<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'>
<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>
3.- Listo. Podemos adaptar el formato a las necesidades de nuestra plantilla modificando los datos en rojo, que corresponden a las medidas y el color de fondo:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
Se pueden configurar otros parámetros, pero con estos será suficiente para tener una nube de etiquetas animada en nuestro blog de blogger.
ACTULIZACIÓN:
A petición de algunos usuarios a través de comentarios, a continuación incluyo el código para que muestre una Nube de Tags con el fondo en negro ("000000") y el texto en blanco ("FFFFFF").
<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'>
<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", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
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>
olle disculpa la nube se me sale del espacio deternimado para este... que puedo hacer porfa
ResponderEliminarHola Lar2:
ResponderEliminarPara que la nube de tags no se salga del espacio predeterminado de tu plantilla tienes que modificar en el código del Blogumus la linea de código qeu dice;
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
Los valores por defecto son 240 y 300, pero tu puedes modificarlos por los valores de tu plantilla, para que la nube ocupe el lugar correspondiente.
En el artículo se especifica más detalladamente como realizar estos pasos. Espero que consigas resolverlo, sino, ya sabes en donde encontrarnos...
Un saludo.
Lamentablemente a mi no me funciona, probé mil veces y nada. Quiero saber por que a todos les funciona y a mi nooooooooooooooooooo
ResponderEliminar¿Que error te da? ¿En que navegador lo has probado? ¿Has insertado correctamente todo el código en un gadget?.. tiene que funcionarte.. esta nube de tags es infalible...
ResponderEliminarHola. Soy novato en esto de modificar plantillas de blogger.
ResponderEliminarPor lo que agradezco posts y blog con ayuda para novatos.
Pero aún así me quedan dudas y lo malo es que no sé si la contestaras... este post es muy antigo. Pero lo entendería :)
La duda es cómo poner el fondo negro y las letras blancas. Con eso de los códigos me pierdo bastante, para que te voy a engañar
Hola Emilio;
ResponderEliminarHe actualizado el post, incluyendo el código para que muestre el fondo en negro y el texto en blanco. Puedes encontrarlo al final del artículo. Espero que de esta forma te resulte más cómodo.
Si todavía te queda alguna duda, coméntalo. Un saludo.
Se me había olvidado dar las gracias. Mejor dicho no enconrtab el enlace de nuevo.
ResponderEliminarYa lo tengo puesto y está operativo. Muchas gracias por la ayuda y la velocidad.
Chapeau :D
Me encantó....buenissssiiiimo!!
ResponderEliminarme dio trabajo en mi blog, porque le he metido demasiada mano a esa plantilla
Y quedo mas o menos por ahora...pero ya veré
MIL GRACIAS!!!!
VeRa
veramarina.blogspot.com
Hola, utilizo esta nube en mi web y va como piña. Vi hace poco y la verdad es que estuve mal porque no guarde la pagina, una nube de tags como esta, animada, pero con imagenes! alguien tiene idea de como hacerla? gracias
ResponderEliminarwow! muchísimas gracias! hace ratos que estaba buscando poner una nube animada en mi blog ^^
ResponderEliminarMe ha servido perfectamente =D
Uau! Gracias! Hacía mucho tiempo que buscaba como hacer una nube de tags como esta.
ResponderEliminarY ya que estamos... Hay algún modo de hacer el fondo transparente?