Páginas

Cómo personalizar la nube de etiquetas de Blogger

En mi opinión, el gadget de etiquetas o categorías de Blogger no puede faltar en un blog ¿por qué? Pues porque sirve a nuestros lectores para ver "de un plumazo" qué temas pueden encontrar en nuestra página, y además para finalmente acceder a ellos con un sólo 'clic'
Por eso, si no queremos prescindir de esta herramienta, lo mejor que podemos hacer es tratar de personalizarlo para que quede bien integrado con el resto del diseño. Y para ello hoy os traigo un par de trucos aplicables a la segunda de las opciones que nos ofrece Blogger
LA NUBE DE ETIQUETAS
Cómo personalizar la nube de etiquetas de Blogger

¿CÓMO CENTRAR EL TEXTO DE LA NUBE DE ETIQUETAS?
Y así conseguir que la nube realmente parezca una nube, ya sabéis que por defecto el texto sale justificado...

Para ello tendremos que entrar en 
plantilla > personalizar > avanzado > añadir CSS
y pegar esto:

/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}


¿CÓMO CAMBIAR EL COLOR Y LA FUENTE DE LAS ETIQUETAS?
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, tipos y tamaños de fuente distintos cada una de las etiquetas según su densidad ¿Cómo hacerlo? Pegando esto:

/* 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;}


¿CÓMO ENMARCAR LAS ETIQUETAS?
Es decir, ponerlas dentro de unas cajitas rectangulares dispuestas unas al lado de las otras. Para ello el CSS que tendremos que añadir es este:

/* 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;
}