Nube de etiquetas con HTML

Hace unos días me comentaban que la personalización en la nube de etiquetas era muy limitada, se añadía el inconveniente de estar usando una plantilla clásica, sugerí crear nuestra propia nube y el resultado ha sido más que agradable.

Cuando creamos una nube de etiquetas conseguimos que cada palabra de la nube sea un enlace a una etiqueta determinada.Lo que sigue a continuación es la forma de crear una nube añadiendo un gadget de HTML y unas líneas en el CSS de nuestra plantilla.

En plantilla de diseño editamos un nuevo gadget HTML y en su interior añadimos lo siguiente:

<div class="nube-html">

<a style="color:#9b2230; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#000000; font-size: 14px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 42px;" href="#">TEXTO</a>

<a style="color:#999999; font-size: 17px;" href="#">TEXTO</a>

<a style="color:#d85564; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 18px;" href="#">TEXTO</a>

<a style="color:#8B8386; font-size: 16px;" href="#">TEXTO</a>

<a style="color:#d85564; font-size: 11px;" href="#">TEXTO</a>

</div>

Añadiremos tantas líneas como etiquetas deseamos añadir.

» En color:#xxxxxx;es el color del enlace.
» Sustituimos TEXTO por el nombre de cada etiqueta.
» La almohadilla # la sustituimos por la url que corresponde a cada etiqueta.
» Con font-size: xxpx; es el tamaño de la fuente.

La forma de conseguir la url de cada etiqueta es muy simple, hacemos click sobre una etiqueta de nuestro blog y se mostrarán todas las entradas con ese etiqueta, lo que haremos será copiar la url que aparece en ese momento en la barra del navegador y pegarla sustituyendo el asterisco #

Una vez tenemos los enlaces creados guardamos los cambios y nos vamos a plantilla Edición de HTML, buscamos ]]></b:skin> y justo antes añadimos lo siguiente:

.nube-html {

border: 1px solid #333;

background: url('url-imagen-fondo') repeat;

margin: 10px 0 10px 0;

line-height: 30px;

text-align: center;

padding: 2px;

padding-top: 10px;

}

.nube-html a {

text-decoration: none;

}

.nube-html a:hover {

border-bottom: 1px dashed #ccc;

}

» Podemos añadir una imagen de fondo a la nube en "background" y borde en "border"

» Para que al pasar el ratón sobre el enlace se produzca un efecto hover añadí en "a:hover" border-bottom: 1px dashed #ccc; que lo podemos sustituir por cualquier otro efecto.