Tag Cloud – Nube de tags en movimiento

 

Nube de etiquetas en movimiento

 

 

 

Elegante nube de etiquetas en movimiento realizada en flash.

 

Es muy fácil de instalar, no tienes que tocar la plantilla.

[1.-]    Descárgate este archivo y súbelo a tu servidor: tagcloud.swf

[2.-]   Copia y pega el código en un elemento HTML/JavaScript o en una entrada del tu blog en edición HTML.

Este es el código:

<!-- Nube de tags en movimiento -->

<div style="border-bottom: grey 3px solid; border-left: grey 3px solid; background-color: #424242; width: 300px; height: 300px; border-top: grey 3px solid; border-right: grey 3px solid">

<embed quality="high" allowscriptaccess="always" flashvars="tcolor=0xbdbdbd&mode=tags&distr=false&tspeed=120&tagcloud=<tags>

<a href='#' style='10'>Etiqueta -1- </a>
<a href='#' style='10'>Etiqueta -2- </a>
<a href='#' style='10'>Etiqueta -3- </a>
<a href='#' style='10'>Etiqueta -4- </a>
<a href='#' style='10'>Etiqueta -5- </a>
<a href='#' style='10'>Etiqueta -6- </a>
<a href='#' style='10'>Etiqueta -7- </a>
<a href='#' style='10'>Etiqueta -8- </a>
<a href='#' style='10'>Etiqueta -9- </a>
<a href='#' style='10'>Etiqueta -10- </a>
<a href='#' style='10'>Etiqueta -11- </a>
<a href='#' style='10'>Etiqueta -12- </a>
<a href='#' style='10'>Etiqueta -13- </a>
<a href='#' style='10'>Etiqueta -14- </a>
<a href='#' style='10'>Etiqueta -15- </a>
<a href='#' style='10'>Etiqueta -16- </a>
<a href='#' style='10'>Etiqueta -17- </a>
<a href='#' style='10'>Etiqueta -18- </a>
<a href='#' style='10'>Etiqueta -19- </a>
<a href='#' style='10'>Etiqueta -20- </a>

<a href='#' style='10'>Etiqueta -A- </a>
<a href='#' style='10'>Etiqueta -B- </a>
<a href='#' style='10'>Etiqueta -C- </a>
<a href='#' style='10'>Etiqueta -D- </a>
<a href='#' style='10'>Etiqueta -E- </a>
<a href='#' style='10'>Etiqueta -F- </a>
<a href='#' style='10'>Etiqueta -G- </a>
<a href='#' style='10'>Etiqueta -H- </a>
<a href='#' style='10'>Etiqueta -I- </a>
<a href='#' style='10'>Etiqueta -J- </a>
<a href='#' style='10'>Etiqueta -K- </a>
<a href='#' style='10'>Etiqueta -L- </a>
<a href='#' style='10'>Etiqueta -M- </a>
<a href='#' style='10'>Etiqueta -N- </a>
<a href='#' style='10'>Etiqueta -O- </a>
<a href='#' style='10'>Etiqueta -P- </a>
<a href='#' style='10'>Etiqueta -Q- </a>
<a href='#' style='10'>Etiqueta -R- </a>
<a href='#' style='10'>Etiqueta -S- </a>
<a href='#' style='10'>Etiqueta -T- </a>
<a href='#' style='10'>Etiqueta -U- </a>
<a href='#' style='10'>Etiqueta -V- </a>
<a href='#' style='10'>Etiqueta -W- </a>
<a href='#' style='10'>Etiqueta -X- </a>
<a href='#' style='10'>Etiqueta -Y- </a>
<a href='#' style='10'>Etiqueta -Z- </a>

</tags>" type="application/x-shockwave-flash" height="300px" src="http://TU SERVIDOR/tagcloud.swf" id="tagcloud" bgcolor="#585858" wmode="transparent" width="300px" name="tagcloud">

</embed>
</div>
<!-- Fin -->

 

[3.-]     Personalización

Como ves en el código, he puesto muchas etiquetas para que se viera el efecto en ésta muestra.

<a href='#' style='10'>Etiqueta …</a>

Evidentemente, tienes que sustituir el símbolo ‘#’ por la dirección URL del enlace y el texto “Etiqueta …” por el título del enlace.

Utiliza tantos como necesites, la molestia es que el mantenimiento es manual, no recupera las etiquetas del blog automáticamente, tienes que introducirlos tu.

Sustituye la URL de tu servidor de archivos para el archivo tagcloud.swf

(Si quieres utilizar el mío, ésta es su dirección: http://sites.google.com/site/pauscripts/scripts/tagcloud.swf )

La estructura del código es:

<!-- Nube de tags en movimiento –>
|----  <div style="...">
|  |----   <embed ...
|  |  |----  <tags>
|  |  |       <!-- INICIO LISTA DE ENLACES Y TITULOS -->
|  |  |       <a href=’#’>TITULO DE LA ETIQUETA</a> 
|  |  |       <!-- FIN LISTA DE ENLACES Y TITULOS -->    
|  |  |----  </tags>"
|  |----   ... ></embed>
|----  </div>
<!-- Fin -->

Si tienes que introducir más enlaces de tus etiquetas, hazlo entre <tags> y </tags>.

Puedes cambiar a tu gusto el estilo para que se adapte a tu diseño o preferencias:

• border-top: grey 3px solid  (Borde superior: color, grosor y tipo)
• border-bottom: grey 3px solid (Borde inferior:    “    ) 
• border-left: grey 3px solid (Borde izquierdo:    “    ) 
• border-right: grey 3px solid (Borde derecho:    “    ) 
• background-color: Color de fondo
• width: Ancho
• height: Alto
• tcolor=0x------ : es el código de color del texto, por ejemplo el color blanco en hexadecimal es, “#ffffff”, aquí tienes que introducir “0xffffff”, en este ejemplo utilizo el gris “#bdbdbd” que es lo mismo que “0xbdbdbd”
• &tspeed: Velocidad de movimiento (a valor más alto más velocidad)
• style=’xx’:  en los enlaces es el valor del tamaño de las fuente de las letras.

 

Si quieres una imagen de fondo, introduce la URL de tu imagen en la primera linea <div style=”……” />  background-image

<div style="border-style:solid;border-color:grey;border-width:1px;background-image: url(URL DE LA IMAGEN); background-repeat: no-repeat; background-color: #bdbdbd; " />


 

Te dejo el enlace a la herramienta que te puede ayudar con los códigos de color:

Generador códigos de color

Espero que te sirva.