Personalizar etiquetas de blogger con CSS

Las etiquetas son un elemento muy importante en nuestro blog. Ellas califican el tema del post, ayudan a que el lector encuentre rápidamente lo que esta buscando y de alguna manera aumenta la cantidad de paginas vistas. Pero en las plantillas de blogger suelen ser bastante "simples", por eso les dejo este código para personalizar las etiquetas y ganar un poco de estilo con un color de fondo, bordes redondeados y un efecto "hover". Las pueden ver funcionando en este link.

 

 Para personalizar las etiquetas deben ir a Diseño / Plantilla / Edicion HTML, buscamos la etiqueta   ]]></b:skin> y antes de ella pegamos el siguiente codigo CSS.

/* ETIQUETAS PERSONALIZADAS CON CSS */
.Label a{
padding-left:10px;
background:#0090D5; /* Color de fondo */
padding:0 10px;
color:#fff!important; /* Color de la fuente */
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; /* transicion */
float:left;
margin-left:3px;
margin-top:3px;
font-size:13px; /* tamaño de la fuente */
-webkit-border-radius: 4px; /* Bordes redondeados */
-moz-border-radius: 4px; /* Bordes redondeados */
border-radius: 4px; /* Bordes redondeados */
}

.Label a:hover{
background:#69625A; /* Color de fondo al pasar el mouse */
-webkit-border-radius: 8px; /* Bordes redondeados al pasar el mause */
-moz-border-radius: 8px; /* Bordes redondeados al pasar el mause */
border-radius: 8px; /* Bordes redondeados al pasar el mause */
}
/* FIN ETIQUETAS PERSONALIZADAS CON CSS */

En el codigo estan nombradas las secciones para que las modifiquen a su gusto para que quede bien con su plantilla.

NOTA IMPORTANTE: Para que quede como las ven en la imagen y en el blog de pruebas tienen que configurar el gadget como se ve en la siguiente imagen.

Espero les guste y sirva y si tienen algun problema o duda pueden dejar un comentario.
¡Gracias por pasar!