Modificando la nube de etiquetas

Lo prometido es deuda, aqui os traigo el "how to" para modificar la nube de etiquetas en flash como os parezca mas comodo.

Por defecto el script Blogumus, trae estas caracteristicas:

• Width is set to 240px (ancho)
  
• Height is set to 300px; (alto)
  
• Background color is white (color de fondo)
  
• Text color is grey (color de las letras)
  
• Font size is "12" (tamaño de las letras)

la linea a editar serian estas:
Ancho, Alto, Color de fondo

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Color del texto

so.addVariable("tcolor", "0x333333");

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

Modificando el ancho y el alto:

Para modificar cualquier cosa de estas, solo necestias modificar el número en el código, es decir si tenemos esto:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Solo tenemos que modificar ese 240 y ese 300, supongamos que queremos una imagen muy ancha porque queremos ponerla en el fondo del blog, pues lo que necesitamos es modificar ese 240 y cambiarlo por ejemplo a 800, ocupando una resolución casi 4 veces mayor a lo ancho. o que vamos a ponerla en una entrada y queremos que ocupe una medida estandar de entrada pues le pondriamos unos 400 x 500 es decir, dejariamos un codigo parecido a este:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "400", "500", "7", "#ffffff");

Es sencillo, lo unico que necesitas es dejar volar tu imaginación, una vez hecho, intenta dejarlo parecido, todo consiste en jugar con los números de ancho y alto hasta conseguir lo que te gusta.

Modificando el color de fondo y texto:

Bien, este #ffffff es como un "número de identificación" (codigo de color hexadecimal) que tienen nos navegadores (entre otros sistemas) para dar los colores a las webs, blogs, foros, etc...y dirás de donde saco yo eso?

Bueno pues te dejo una web para que lo mires:

html-color-codes.info

está muy bien, abajo viene un panel de esos como photoshop en el que tu eliges todo, color, oscuridad o luz, muy bueno.

Solo tienes que elegir el color que quieres y sustituirlo por el #ffffff, ¿sencillo verdad?
Ejemplo:
Queremos poner el fondo en lugar de blanco de color azul clarito, por ejemplo.
el codigo del azul clarito que usaremos es #2EFEF7

Pues vamos a nuestro código, y buscamos la linea:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Quedando así:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#2EFEF7");

Para modificar el color del texto hacemos lo mismo que antes, pero en esta linea, y con otro color:

so.addVariable("tcolor", "0x333333");

Por ejemplo queremos que el texto sea rojo:
código del rojo: #FF0000

so.addVariable("tcolor", "0xFF0000");

Daros cuenta de que en esta ocasion no hemos copiado el símobolo #.
Cambia solo los numeros y letras, no quites el 0x, ni pongas # o no funcionará.

Modificando el tamaño de la fuente:

Aquí es sencillo, simplemente sustituir el número por el que queremos.

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

Que queremos que las letras sean muy pequeñas, aplicamos una fuente de tamaño 8:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='8'><data:label.name/></a></b:loop></tags>");

Así hasta que consigamos el tamaño que nos gusta.



Esto ha sido todo, espero que os haya gustado el manual que he hecho. Tuve problemas con los colores, asique no se como os quedará si intentais copiarlo a otra pagina web :S hay un par de lineas que tuve que cambiarlo manualmente y no se como quedó, por lo menos para este fondo se ve todo igual.