Un par de estilos para la nube de etiquetas

El gadget de etiquetas o categorías de Blogger es por razones evidentes uno de los más utilizados por todos los que andamos por esta plataforma.

Además de permitirnos organizar nuestras entradas, sirve a los nuevos visitantes cómo pequeña memoria de los contenidos que se encontrarán en el sitio y también cómo filtro de selección de estos. Incluso son útiles para suscribirse por feed sólo a aquellos apartados que nos interesan de la bitácora.

Su configuración en cuanto a aspecto tiene sólo dos opciones, lista y nube, pero ambos pueden ser personalizados para integrarlos con la estética de nuestro sitio. Para mi gusto el segundo es bastante más atractivo y lo que veremos a continuación son sólo un par de ejemplos distintos para modificarlo.

El primero sigue un estilo clásico y sencillo, tanto como el código necesario para cambiarlo, porque simplemente eliminaremos el justificado que lleva por defecto y centraremos las etiquetas, todo con la idea de que el conjunto parezca más una nube. Además le daremos un poco de colorido.

El gadget genera distintas etiquetas con el formato .label-sizeX, siendo X un número del 1 al 5, de manera que las etiquetas que más se utilizan llevan un 5 y las que menos un 1, pasando por 2, 3 y 4 para los valores intermedios.

Aprovechando esto podemos realzar con colores y tamaños de fuente distintos cada una de las etiquetas según su densidad.

/* Etiquetas en nube centrada multicolor */

.cloud-label-widget-content {text-align: center;}

.label-size-1 a {color: #eee; font-size: 12px;}

.label-size-2 a {color: #996666; font-size: 14px;}

.label-size-3 a {color: #333; font-size: 18px;}

.label-size-4 a {color: #eee; font-size: 24px;}

.label-size-5 a {color: #990000; font-size: 30px;}

Como no podía ser de otra manera, estos valores los podéis cambiar al gusto, pero también se pueden añadir otras pequeñas variaciones como por ejemplo un alto de línea (line-height) escaso para solapar un poco el texto de las etiquetas, una tipografía distinta (font-family) o un color de fondo para el hover.

La otra versión es más románica aunque le he añadido un pequeño redondeado y efecto para el hover que lo vuelve algo gótico. Para un estilo más sobrio mejor quitar al menos el border-radius.

Se trata en este caso de enmarcar las etiquetas en cajas rectangulares y disponerlas una al lado de la otra. El efecto para el hover es el que requiere más código porque haremos una especie de zoom con ellas. Prescindible o modificable, como siempre.

/* Etiquetas enmarcadas con efecto zoom */
.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block;
margin: 2px 2px 0 0;
padding: 4px;
text-transform: uppercase;
border: 1px solid #996666;
text-decoration:none;
font-size:12px;
color:#666;
background: #eee;
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover {
border: 1px solid #000;
color: #000;
background: #fff;
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}