Caidos De La Realidad

Nube de Tags en Movimiento

Los usuarios de blogger envidiamos una cosa que los de WordPress pueden tener, cono solo instalar un plugin, Una nube de tags o etiquetas en movimiento, formando una esfera y que al pasar el mouse se mueve con un efecto 3D.

Gracias a Amanda de BloggerBuster podemos tener ese mismo efecto siguiendo una serie de pasos para nada difíciles, pero que a algunos puede marear.

Este efecto es una mezcla de javascript con animación flash reproduciendo un plugin original de WP.

Ante todo, siempre descargar la plantilla por cualquier inconveniente

Primer paso:

Ir a Edición>>Edición de HTML y sin expandir artilugios, buscamos el el siguiente código:

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

Nota, es muy posible que no encuentren este código textualmente como está acá, este codigo es de plantillas standar´s de blogger. Si ustedes tiene  plantillas modificadas como yo o tienen más de una sidebar. En mi caso 3, tienen que buscar la palabra “Sidebar” hasta encontrarse con un código que diga:

b:section id=’Nombre de la sidebar’

Que puede ser por ejemplo lsidebar o rsidebar, etc. Solo es cuestión de probar.

Una vez encontrado el código, agregamos el siguiente código debajo:

<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”, “0×333333″);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>

Ahora, ya tendríamos puesta la nube. Pero nos faltaría adecuarla para que combine perfectamente con nuestra plantilla, en cuanto a tamaño y colores.

Por defecto, la nube tiene estas características:

• Ancho 240px
• Alto 300px;
• Color de fuente: Blanco
• Color de Fondo: Gris
• Tamaño de la fuente: “12″ 

Para cambiar el alto y el ancho, simplemente cambiar los siguientes valores:

var a
fin = new SWFObject (
“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”,
“tagcloud”, “240“, “300“, “7″ , “# FFFFFF”);

Rojo: Ancho

Verde fluor feo: Altura

Para cambiar el color de fondo:

var a
fin = new SWFObject (
“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”,
“tagcloud”, “240″, “300″, “7″ , “# FFFFFF“);

Agregando el código del color que queramos.

Para Cambiar el color de la fuente: 

so.addVariable(“tcolor”, “0x333333“); 

Solo cambiar los numeros 333333, dejar el 0x sin cambiar.

Tamaño de la Fuente:

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

style=’12′: Tamaño de la fuente.

Velocidad:

so.addVariable(“tspeed”, “100″);

Cambian el 100 por la que quieran (120 no queda nada mal). O pueden ponerle 1000 y probar que sucede =)

Esto es todo. Si hicieron todo bien, le dan a vista previa y ya tendría que estar ahí andando. Como verán a la derecha, si se toman el tiempo, pueden integrarla perfectamente. Y es adictivo pasarse un buen rato jugando con ella. Es normal

Cualquier pregunta o duda solo escriban.

Y por último, una ves creada, pueden moverda a cualquier lugar como cualquier otro widget, desde ‘elementos de la pagina’ 

Saludos

Video de la Semana

Posted in Sobre el Blog, Tecnologia, blogging