Personalizar el gadget de etiquetas con CSS3

El gadget de etiquetas es muy importante en Blogger, ya que en ella mostramos una lista completa de los articulos del blog organizados en categorias, asiq eu darle un buen aspecto a este gadget es fundamental.

Hoy les mostrare una forma muy elegante de personalizar este gadget, solo con CSS3 por lo que no sobrecargara tu blog, ya que este codigo es muy ligero.

El gadget de etiquetas quedara de la siguiente manera:


 Primero que todo para aplicar este truco debes tener el gadget en forma de nube, luego de eso deberas agregar antes de ]]></b:skin> lo siguiente:

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
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;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Ahora solo resta guardar los cambios y listo.Espero que les haya sido de utilidad este truco y sigan visitando Mil Trucos Blogger, para descubrir nuevos trucos para sus blogs.

0
Shares

22 thoughts on “Personalizar el gadget de etiquetas con CSS3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *