Gadget de etiquetas personalizado

Voy a dejar un momento por fuera el posicionamiento web para dedicarme a mostrar la personalización del gadget de etiquetas de blogger que utilizo en Mi blog en Blogger. Para ello me basé el en blog de Oloman. El gadget de etiquetas nos permite mostrar una lista completa de los artículos del blog organizados en categorías, por ello es necesario darle un buen aspecto.

Paso 1. Agregamos el gadget de etiquetas.

Paso 2. Aparece la siguiente ventana donde damos clic en Etiquetas seleccionadas.

Damos clic en editar, para seleccionar las etiquetas que harán parte de nuestro menú. En este caso selecciono Google, Herramientas, Menú, SEO y seorimícuaro.

Damos clic en listo y luego en guardar para agregar el gadget. se verá como sigue.

Paso 3. Vamos a la plantilla y agregamos el siguiente código antes de </head>.

  <style>

dir { 

margin: 0; padding: 0; 

}

.list-label-widget-content ul {

 width:270px; height: 70px; margin:0px auto; padding: 0; border: 1px solid #C0C0C0; 

}

.list-label-widget-content li {

 width: 125px; height: 20px; display: inline-block; zoom: 1; *display: inline; margin: 0; padding: 2px 3px; line-height:20px; background:none;-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; 

}

.list-label-widget-content li a { 

width: 125px; height:20px; display: inline-block; zoom: 1; *display: inline; 

}

.list-label-widget-content li a { 

font:normal Yanone Kaffeesatz; color: #C0C0C0; 

}

.list-label-widget-content li:hover { 

height: 20px;background: #C0C0C0; line-height:20px;text-align:center; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; 

}

.list-label-widget-content li a:hover { 

text-decoration: none; 

}

.list-label-widget-content li span h2 {

 font: normal Yanone Kaffeesatz; color:#BE961D;text-transform:uppercase; 

}

.list-label-widget-content li span h2:before {

 font-size:13px;font family:arial; content:&quot; \25ba&quot;; 

}

/*coloración del lado izquierdo */

.list-label-widget-content li:nth-of-type(2n+1) { 

text-align: right; border-right:1px solid #C0C0C0; -moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px; border-radius:20px 0 0 20px; 

}

/*coloración y línea vertical de las categorías del lado derecho*/

.list-label-widget-content li:nth-of-type(2n) {

 text-align:left; -moz-border-radius: 0 20px 20px 0; -webkit-border-radius:0 20px 20px 0; border-radius:0 20px 20px 0; 

}

</style>

El resultado será el siguiente, se verá un efecto transicional cuando paso el cursor por cada una de las categorías existentes.

Por este artículo es todo, en el próximo veremos cómo personalizar la página de etiquetas.