Dise??o – de la nube de etiquetas

  • julio 12, 2010

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

No Comments Found