¡¡ Nuevo Webmasters Deluxe !!

Ahora Webmasters Deluxe ha cambiado de lugar. Puedes encontrarnos en www.webmastersdeluxe.com con más contenido, más funciones y más social.

A+ | a-

lunes, 15 de diciembre de 2008

Blogumus; Nube de Tags Animada en Blogger

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


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", "0x
ffffff");
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>


11 comentarios:

  1. olle disculpa la nube se me sale del espacio deternimado para este... que puedo hacer porfa

    ResponderEliminar
  2. Hola Lar2:
    Para 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.

    ResponderEliminar
  3. Lamentablemente a mi no me funciona, probé mil veces y nada. Quiero saber por que a todos les funciona y a mi nooooooooooooooooooo

    ResponderEliminar
  4. ¿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...

    ResponderEliminar
  5. Hola. Soy novato en esto de modificar plantillas de blogger.

    Por 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

    ResponderEliminar
  6. Hola Emilio;
    He 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.

    ResponderEliminar
  7. Se me había olvidado dar las gracias. Mejor dicho no enconrtab el enlace de nuevo.
    Ya lo tengo puesto y está operativo. Muchas gracias por la ayuda y la velocidad.

    Chapeau :D

    ResponderEliminar
  8. Me encantó....buenissssiiiimo!!
    me 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

    ResponderEliminar
  9. 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

    ResponderEliminar
  10. wow! muchísimas gracias! hace ratos que estaba buscando poner una nube animada en mi blog ^^

    Me ha servido perfectamente =D

    ResponderEliminar
  11. Uau! Gracias! Hacía mucho tiempo que buscaba como hacer una nube de tags como esta.
    Y ya que estamos... Hay algún modo de hacer el fondo transparente?

    ResponderEliminar

Normas de publicación:
- El comentario debe de tener relación con la entrada
- Los comentarios anónimos están permitidos, pero serán moderados
- Argumenta tus comentarios de forma clara. Aporta información Relevante.
- No utilices unicamente Mayúsculas ni ortografías abreviadas del tipo texto SMS. Escribe correctamente.
- El Spam será borrado automaticamente.
- No hagas comentarios irrelevantes; serán considerados Spam.
- Evita las ideas generales y el lenguaje vulgar.
- Para dejar tu URL comenta con OpenID.
- Backlinks son automaticos.
- Los comentarios pueden tardar un tiempo mínimo en ser publicados.

NOTA: Los comentarios de los usuarios no reflejan las opiniones del editor. No se aceptarán bajo ningún concepto comentarios difamatorios, o faltas de respeto hacia los usuarios de este blog. Libertad de expresión Si, pero con educación.

  ©Diseño: Isi Roca.

Subir