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.