lunes, 12 de julio de 2010

Diseño - de la nube de etiquetas



Hace tiempo ya que es sabido que podemos usar una opción del gadget "Etiquetas" de Blogger, para mostrar nuestras etiquetas en forma de nube.

Se da la casualidad que ayer recibí dos emails sobre el mismo tema: como cambiar el diseño de la nube una vez añadida en el blog, así que veremos en esta entrada como hacerlo.

Una vez añadido el gadget en la sidebar, tendremos una nube de etiquetas con un diseño por defecto que se adapta, más o menos, al del resto de la sidebar.
El gadget mostrará los títulos de las etiquetas con cinco tamaños diferentes, dependiendo del número de veces que la etiqueta es utilizada, es decir, a más entradas con una etiqueta concreta, mayor será el tamaño de esta respecto a las demás.


Para modificar el tamaño, color del texto, separación, etc. de las etiquetas, tendríamos que añadir algunas líneas de CSS en la plantilla, como siempre lo haremos antes de ]]></b:skin>


.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #8b8989; font-size: 10px;}
.label-size-2 a {color: #000000; font-size: 12px;}
.label-size-3 a {color: #4682b4; font-size: 14px;}
.label-size-4 a {color: #dccdc; font-size: 15px;}
.label-size-5 a {color: #6495ed; font-size: 18px;}

Modificaciones
.cloud-label-widget-content {
Controla el diseño del contenedor de la nube, en mi ejemplo las etiquetas se verían centradas y en negrita.
.cloud-label-widget-content span {
Controla la distancia entre las etiquetas, en mi ejemplo 5 pixeles de separación.
.label-size
Ahí controlamos el color de texto y tamaño de cada una de las etiquetas, según las cinco opciones que el gadget proporciona.

Nota:
Aunque en mi caso he utilizó estos cambios incluidos en el CSS tal como indico en la entrada, podría darse el caso de que hubiese que sobrescribir las propiedades para que los cambios se muestren.
En ese caso lo que hacemos, es incluir el CSS a añadir entre <style type='text/css'> y </style> y lo colocamos justo después de la etiqueta <body> de la plantilla.

Fuente - El Escaparate

0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones