Cambiar en Blogger el estilo de la nube de etiquetas

By: Iván Dangerfield en domingo, diciembre 22, 2013
Hoy voy a mostraros a cambiar fácilmente y rápidamente el estilo clásico de la nube de etiquetas de Blogger, por unas más contemporáneas y más limpias en cuanto a diseño se refiere. El gadget de etiquetas, es unos de los más usados por los blogueros en la plataforma Blogger, por razones obvias. Sirve para organizar nuestras entradas, cómo filtro a las distintas categorías que insertamos cómo etiqueta en cada una de nuestras entradas, y cómo resumen de los contenidos que tenemos incluidos en cada etiqueta. Las etiquetas o categorías son una herramienta fundamental para cualquier blog y para nuestros lectores.

En cuanto a configuración, si nos vamos al gadget de etiquetas, tenemos dos opciones para cambiar el aspecto: Nube o Lista. En está ocasión veremos en este caso el de la nube, en mi opinión las etiquetas en nube son más atractivas. Les cambiaremos la presencia, con un poco de CSS3, y añadiremos con dicho código de estilos: bordes redondeados, transiciones con efecto Zoom al hacer hover, y en cuanto a color de los bordes, ya cada uno los cambia al color deseado y el background, el fondo del botón de las etiquetas, también. Vamos allá, enjoy!
Captura de la nube

Para añadir los estilos CSS en Blogger sigue los pasos

1. Ves a Blogger
2. Ahora a Plantilla
3. Y busca con Ctrl+F la siguiente etiqueta ]]></b:skin>
4. Una vez localizada, dicha etiqueta, añade el siguiente código antes de ]]></b:skin>

.cloud-label-widget-content span a {
margin:0 2px 6px 0;
padding: 3px;
font-family: Arial;   /* Cambia la fuente */
text-transform: uppercase; /* Cambia la fuente en minúsculas con lowercase */
border: solid 1px #C6C6C6;  /* Cambia el borde, el color y el grosor */
border-radius: 3px;  /* Borde redondeado */
float:left;  /* Posición */
text-decoration: none;
font-size:12px;  /* Tamaño de la fuente */
}
.cloud-label-widget-content span a:hover {
border:1px solid #029FC4;  /* Cambia el borde, el color y el grosor */
color: #029FC4;   /* Color de la fuente */
background: #fff;  /* Color del fondo */
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); /* Transformación escala */
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;  Transición */
}

Get free premium widgets for your blog and website.