Tutoriales Sobre Blogger: Nube de Etiquetas para Blogger con CSS

En este tutorial veremos como agrégales CSS a nuestras Etiquetas para Blogger. Muchas veces nuestras etiquetas se ven demasiadas apagadas y no son llamativas. En este tutorial veremos como agregarles un aspecto mas profesional con CSS



La demostración se encuentra en nuestro Blogg

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML 
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>  

• Paso 3: Justo por encima de ]]></b:skin>   pegamos el código CSS 

/*-----Etiquetas Tutorialesblogger.blogspot.com*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

• Paso 4: Guardamos los cambios efectuados en nuestra plantilla

Agregaremos el Gadget Etiquetas  para ello seguimos los siguiente pasos 

• Paso 5: Vamos a Blogger>>Diseño>>Añadir nuevo Gadget>>Etiquetas

Ver imagen 

• Paso 6: Guardamos el Gadget y listo ya tendremos nuestras etiquetas con CSS