Personalizar el Gadget de etiquetas dandole un estilo diferente ~ Tube trucos

El gadget Labels,etiquetas es muy usado en los blog,muchos los usan como menú otros simplemente muestran las etiquetas que tienen,en este tutorial van a saber como personalizar esas etiquetas dándole un estilo diferente y no el que viene por defecto que solo son palabras sin ningún fondo o color.

Para personalizar las etiquetas en Blogger es muy sencillo y no nos toma mucho tiempo,y así vamos mejorando poco a poco cada parte del blog.

Para añadirlo se los voy a brindar de dos formas una mediante el siguiente botón ,solo dan click y escogen el blog al que quieres añadirle este estilo.también pueden editarlos una ves se instale buscan el gadget con el titulo Estilos de las etiquetas lo abren y lo pueden editar ustedes mismos cambiándole el color a sus gustos y le borran el titulo solo se lo pongo para que sepan donde se encuentra el código y no se pierdan.

.label-size a:hover{background:#000;}

.label-size a:hover:before{border-color:transparent #000 transparent transparent;}</style>

Si lo quieren añadirlo ustedes mismos van a Diseño >>> Añadir un gadget >>> y buscan :

Una ves encontrado pegan el siguiente código :

<style>
.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:20px; line-height:20px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:5px; padding:0 10px 0 5px; background-color: #696969;background-image: -moz-linear-gradient(#000, #696969);background-image: -webkit-linear-gradient(#000, #696969);background-image: -o-linear-gradient(#000, #696969);background-image: linear-gradient(#000, #696969); color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px;-moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-top-left-radius:4px; }

.label-size a:hover{background:#000;} .label-size a:hover:before{border-color:transparent #000 transparent transparent;}</style>

Si se fijan al final de este blog pueden ver que lo tengo implementado en este sitio, le di dos tonos, el cual ustedes pueden darle el color que quieran .

Lo que esta en color rojo es el color negro que es el color de arriba.
Lo que esta en color naranja es el color gris que es el color de abajo.
Lo que esta en color amarillo es el color negro que aparecerá cuando le pases el mouse por encima.

Si no saben que color ponerle ,pueden encontrarlos aquí.