Enlaces en forma de nube

Hace unos días he colocado los enlaces "Imprescindibles" de mi menú en forma de Nube. Como podéis comprobar, tienen el mismo aspecto que solemos ver las nubes de etiquetas.
Hacerlo es bastante sencillo solo necesitamos un poco de CSS y algo de "trabajo manual" para colocar nuestros enlaces en un elemento HTML.



[1] Añadimos este código en el CSS de nuestra plantilla, antes de ]]></b:skin>:

/* Nube de enlaces-------*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#da080c;}
#tagcloud .tag2{ font-size:1.2em; color:#7c9fbd;}
#tagcloud .tag3{ font-size:1.4em; color:#a6c4e1;}
#tagcloud .tag4{ font-size:1.3em; color:#0fd580;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

En text-aling elegiremos la posición del texto de los enlaces dentro del elemento: center=centrados, left=izquierda, right=derecha y en padding colocamos la distancia que queremos desde los lados de nuestra nube al borde del elemento donde la hemos colocado.

He añadido en el código cuatro tipos de tags distintos, por color y tamaño de fuente. En font-size podéis cambiar el tamaño de cada tag (ese es el tamaño que tendrá el enlace) y en color es donde podéis escoger el color del texto de cada enlace.

[2] Guardamos los cambios y en la parte de "Diseño" añadimos un nuevo elemento HTML y pegamos este código dentro:

<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
</div>

Ahí podéis añadir tantos enlaces como querías mostrar en la nube.
Fijaros que la clase (class=) es lo que hace que cada enlace tenga las propiedades que le hemos puesto antes en el CSS.