-->

Personalizar la presentacion de las Etiquetas

Si estas aburrido de la presentacion que blogger le da por defecto a las etiquetas, aqui te traigo un truco para darles una apariencia diferente y llamativa como lo notarás en este blog

Lo unico que tienes que hacer es:
1- Ir a diseño de página y agregar el gadget ETIQUETAS en el lugar que a ti te guste.

2- Ir al diseñador de plantillas y agregar CSS
En este campo pegas los estilos, que puedes personalizar a tu gusto:



#Label1 h2 { /*estilos del título*/
border-bottom: 1px dashed #fffdfa; /*El color y estilo del borde debajo del titulo*/
color: #563b10; /*color de la fuente del título*/
background: none;
}
#Label1 ul {
margin: 0;
padding :0;
list-style: none;
}
#Label1 li {
margin: 0 0 3px 0;
padding: 0;
line-height: 1.3em;
border: none;/*importante en las nuevas plantillas*/
float: left;
}
#Label1 li a{
float: left;
padding: 1px 4px 2px;
margin: 2px 4px 0 0;
text-decoration: none;
color: #3f2b0b;
font-size: 14px;  /*El tamaño de la fuente de las etiquetas*/
white-space: nowrap; /*para evitar que el enlace de un salto en linea*/
border: 1px solid #bdcfd2; /*el borde */
background-color: #cfe0e3;  /*el color de fondo*/
/*esquinas redondeadas para cada navegador*/
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
/*las transiciones para cada navegador*/
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
#Label1 li a:hover{ /*el efecto hover*/
background-color: #7dbbd2; /*color de fondo*/
color:#fff; /*color de la fuente*/
border: 1px solid #6a9cae; /*el color y estilo de borde*/
}
#Label1 span[dir=ltr]{
display: none; /*evitamos mostrar la etiqueta seleccionada*/
}




Créditos: Compartidisimo

No hay comentarios :

Publicar un comentario

¿Que te pareció esta publicación?