Nube de Etiquetas en Blogger con CSS (II)

Como ya les esplique Blogger inserta por defecto, al añadir un gadget de etiquetas tipo lista.
Para personalizar las etiquetas con CSS y quede así

Debemos:

1. Instalar el Gadget de Etiquetas para Blogger. Si no lo tienes instalado explico cómo hacerlo en Nube de etiquetas en Blogger con CSS.
2. Luego debemos ir a Plantilla, Personalizar y llegaremos hasta el diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice Avanzado, abajo del todo encontrarán una opción que dice añadir CSS, en ese recuadro van a añadir 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;
}

Le dan aplicar al blog y listo.

• Para cambiar el color del fondo de las etiquetas tendremos que cambiar  los valores en: background:#0089e0;  border-color:transparent #0089e0 ; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977 y box-shadow:-1px -1px 2px #004977

Via: Stylifyyourblog