NUBE DE ETIQUETAS

Os voy a mostrar una forma muy sencilla de hacer una nube de etiquetas. Este recurso nos permitirá ofrecerle a nuestros visitantes las etiquetas de una forma mas atractiva que como lo hace blogger, ya que podremos definir el tamaño y color de los títulos de los enlaces. Es un recurso muy recomendable ya que nos permite mostrar la información de una forma personalizada y llamativa. El resultado que otendremos será algo como lo siguiente:

En primer lugar:(Un poco de estilo)

Deberemos ir al código de nuestra plantilla y colocar el siguiente código justamente encima de la linea donde pone ]]></b:skin>

/* Nube de Etiquetas*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#CC0700;}
#tagcloud .tag2{ font-size:1.1em; color:#CC9C00;}
#tagcloud .tag3{ font-size:1.3em; color:#C2CC00;}
#tagcloud .tag4{ font-size:1.5em; color:#00C2CC;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }
/*FIN Nube de Etiquetas*/


Segundo paso:(Entendiendo el código)

Antes de continuar copiando código vamos a entender lo que acabamos de copiar, que se resume a lo siguiente:

padding: es la distancia en píxeles de la separación entre vínculos.
font-size: tamaño de la letra.
color: color del del vínculo. Consultar colores.

Una vez sabemos lo que hemos copiado, continuaremos siguiendo los pasos, luego podremos volver a este punto para personalizarlo teniendo en cuenta para que sirve cada atributo.

Tercer paso:(Crear la nube)

Para ello crearemos un gadget de tipo HTML/Javascript y añadiremos en su interior el siguiente código:

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


Como podemos observar son 5 lineas prácticamente iguales, lo único que cambia es el número del tag, por tanto si lo que queremos es clasificar 10 etiquetas tendremos que añadir 10 líneas de la misma forma, únicamente modificando el número que acompaña al tag. Yo por ejemplo combino el número del tag como podéis observar la secuencia es 1,4,3,2,1.., podéis insertarlo en el orden que queráis para darle el efecto deseado. Tendréis que añadir la Url del enlace de la etiqueta correspondiente y el texto del vínculo por cada etiqueta que queráis añadir. Insertados unos cuantos con su respectiva URL es cuando podréis observar el resultado y por tanto personalizar correctamente la nube retrocediendo al primer paso y modificando los atributos correctamente.