Personalizar la Nube de Etiquetas con CSS (II)

Comparteme :

Hace unos días expliqué como Personalizar la Nube de Etiquetas con CSS en Blogger y compartí con vosotros algunos diseños que hice. Hoy comparto otro diseño muy bonito que he encontrado en Stylifyyourblog. Podéis ver una demo a continuación:

Demostración

Instalar el Gadget de Etiquetas para Blogger. Si no lo tienes instalado explico cómo hacerlo en Personalizar la Nube de Etiquetas con CSS.
Ir a Escritorio Blogger.
En el menú seleccionamos Plantilla.
Hacemos clic en Editar HTML.
En el código buscamos lo siguiente:

]] ></b:skin>

Encima de ello tenemos que pegar 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;}

Eso es todo, si tienes alguna duda acerca de este tutorial déjame un comentario en esta entrada.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Personalizar la Nube de Etiquetas con CSS (II).

Comparte

BLOGUERO TUTORIAL