Para que la nube de etiquetas parezca más una nube

El otro día anunciábamos que ya se podía colocar una nube de tags, etiquetas o categorías, directamente desde los gadgets de Blogger.

El caso es que después de probarla para uno de mis blogs, el resultado me pareció bastante soso. Vamos, que para eso mejor que se hubieran estado quietos. Sin embargo, (casi) todo es aprovechable y en esta ocasión, con un poco de CSS podemos hacer una chapucilla para que la cosa tenga algo más de salero.

En un principio, se instalan las etiquetas en modo "nube" y todo lo demás lo haremos editando la plantilla y dando formato a las clases de estilo internas que Blogger utiliza para este artilugio y que según nos explicó en su momento Vagabundia, son:

• El bloque contenedor: .cloud-label-widget-content
• Etiqueta SPAN para los enlaces: .cloud-label-widget-content span
• Los cinco tamaños de los enlaces: .label-size-1, .label-size-2, .label-size-3, .label-size-4 a y .label-size-5.

Como viene muy lineal, para hacer la nube un poco más caótica, vamos a hacer flotar todas las etiquetas a la derecha para que se vayan solapando en horizontal, asignaremos un alto de línea menor que las etiquetas más grandes para que se monten un poco en vertical y por último colocaremos distintos márgenes para los distintos tamaños para descentrarlas un poco más. De esta manera, un código de ejemplo podría ser este que reproducimos a continuación. Hay que colocar justo antes del ]]></b:skin>

/* ESTILO NUBE */
.cloud-label-widget-content {
width:100%;
margin:0px auto;
}
.cloud-label-widget-content span {
float:right;
}
.cloud-label-widget-content span a {
line-height:12px;
}
.cloud-label-widget-content span a:hover {
background:#ff0000;
text-decoration:none;
}
.label-size-1 a, .label-size-1 a:link, .label-size-1 a:visited {
font-size:10px;
margin:25px 0px 0px 5px;
color:#ffffff;
}
.label-size-2 a, .label-size-2 a:link, .label-size-2 a:visited {
font-size:14px;
margin:5px 10px 0px 20px;
color:#990000;
}
.label-size-3 a, .label-size-3 a:link, .label-size-3 a:visited {
font-size:18px;
margin:10px 30px 0px 30px;
color:#ffffff;
}
.label-size-4 a, .label-size-4 a:link, .label-size-4 a:visited {
font-size:22px;
margin:0px 20px 0px 10px;
color:#999999;
}
.label-size-5 a, .label-size-5 a:link, .label-size-5 a:visited {
font-size:26px;
margin:0px 0px 0px 5px;
color:#990000;
}

El resultado sería algo así:


Podeis observar que también se han usado distintos colores para las distintas etiquetas y que se han incluido las pseudo clases LINK y VISITED. Esto último es para dos cosas. Una para que no cambie el color del enlace de las etiquetas y la otra para que el puñetero Explorer no le de prioridad al estilo por defecto que tengamos para los enlaces. Por otro lado, el WIDTH se ha colocado intencionadamente para el caso de que se instale en columnas muy anchas o en blogs con pocas etiquetas, (widebar). En ese caso, convendría reducir el porcentaje a una cifra menor para que el artilugio no quedara muy desangelado.

Ahora a jugar con los tamaños, los colores, los fondos para el HOVER o cualquier otro efecto que se os ocurra. El aspecto final también cambia dependiendo de si escogemos que las etiquetas se muestren por FRECUENCIA o por orden ALFABETICO. Los tamaños de letra muy grandes o los LINE-HEIGHT más pequeños, provocan que las letras se monten bastante más, incluso solapándose. Haced pruebas.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter