Nube de etiquetas personalizada con CSS3

Vista previa del gadget de etiquetas

¿Cansado de ver siempre el mismo diseño en la nube de etiquetas de Blogger (Label)?

El gadget de etiquetas es muy importante en Blogger, ya que en ella mostramos una lista completa de los artículos del blog organizados en categorías, por eso el buen aspecto de este gadget es fundamental.

hoy vamos a comentar como personalizarlo un poco y darle un aspecto más moderno mediante CSS3.

A continuación sigue los siguientes pasos, el procedimiento es bastante sencillo y no tiene pérdida.


Lo primero que hacemos es crear el Widget de etiquetas.

Para ello entramos al blog, añadimos el widget de etiquetas (si no lo tenemos ya) y lo configuramos de la siguiente forma:

Guardamos los cambios para continuar.

En las opciones de nuestro blog, entramos en Plantilla y pulsamos sobre Edición HTML. Con las teclas CTRL + F buscaremos este código ]]></b:skin> y justo antes pegamos el siguiente código:

.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;}

Si queremos cambiar el color del fondo de las etiquetas tendremos que cambiar los valores en background.

Esta nube de etiquetas la podéis ve funcionando en la sidebar de este blog.