24 de noviembre de 2009

Nube de etiquetas con estilo CSS

Las etiquetas son la mejor manera de navegar por la página consiguiendo encontrar lo que buscas de una manera muy sencilla.  Una vez instalado el gadget de etiquetas original de blogger, con la opción nube, el estilo queda demasiado simple.  Para darle formato he añadido el siguiente código justo antes de la etiqueta ]]></b:skin>.

/* ESTILO NUBE */
.cloud-label-widget-content {
width:100%;
margin:0px auto;
}
.cloud-label-widget-content span {
float:center;
}
.cloud-label-widget-content span a {
line-height:12px;
}
.cloud-label-widget-content span a:hover {
background:#cbbfff;
text-decoration:none;
}
.label-size-1 a, .label-size-1 a:link, .label-size-1 a:visited {
font-size:12px;
margin:15px 0px 0px 15px;
color:#000000;
}
.label-size-2 a, .label-size-2 a:link, .label-size-2 a:visited {
font-size:14px;
margin:12px 0px 0px 12px;
color:#0066CC;
}
.label-size-3 a, .label-size-3 a:link, .label-size-3 a:visited {
font-size:16px;
margin:10px 0px 0px 10px;
color:#2BA94F;
}
.label-size-4 a, .label-size-4 a:link, .label-size-4 a:visited {
font-size:19px;
margin:8px 0px 0px 8px;
color:#9D1961;
}
.label-size-5 a, .label-size-5 a:link, .label-size-5 a:visited {
font-size:22px;
margin:5px 0px 0px 5px;
color:#999999;
}

Cambiando los códigos de color y los píxeles de los márgenes, podremos personalizarlo a nuestro gusto.  Está modificado del código que publica Oloblogger.

Entrada anterior Entrada siguiente Página Principal
Related Posts Plugin for WordPress, Blogger...