domingo, 3 de febrero de 2013

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.

Gadget de etiquetas

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

Personalizar gadget de etiquetas

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.

Etiquetas seleccionadas

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

Gadget de etiquetas agregado

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.

Resultado gadget de etiquetas

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

4 comentarios:

  1. MILLONES DE GRACIAS!!!

    ResponderEliminar
  2. No me quedó tu código; yo tengo tres listas de etiquetas independientes y sólo quiero aplicar el efecto a una de ella, ya intenté varias formas y no lo logré.

    ResponderEliminar

Tu comentario es importante...