Los widget de Etiquetas muestran una lista de categorias de Articulos. Al crear las etiquetas nos ayuda a acomodar en categorias las entradas en grupo. Asi ayudamos a los visitantes a ver los articulos en categorias. Por defecto el widget de blogger no tiene estilo atractivo.
Aqui compartire una serie de widgets de labels con estilo atractivo. Son hechos utilizando codigo css. Para insertarlo en tu blog de blogger sigue estos pasos:
- Entra en tu cuenta de Blogger
- Ve a Plantilla -> Editar HTML
- Encuentra la etiqueta ]]></b:skin> y copia el codigo de label estilizadas que te guste y pegala antes de ]]></b:skin>
- Guarda Plantilla
Tema de Skeleton Con Efecto Hover de Pintado
.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
.Label li {border: 1px solid;border-radius: 6px 6px 6px 6px;color: #000000 !important;float: left;font-size: 116%;list-style: none outside none;margin: 2px;padding: 4px;transition: all 0.3s ease 0s;}
.Label a {color: #000;text-decoration: none;}
.Label li:hover {transform: rotate(5deg);}
Widget de Etiquetas Tema de Hojas
.Label a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #7FBF4D;
background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
border-bottom-right-radius: 30px;
border-color: #63A62F #63A62F #5B992B;
border-image: none;
border-style: solid;
border-top-left-radius: 30px;
border-width: 1px;
box-shadow: 0px 1px 0px 0px #96CA6D inset;
color: #FFFFFF;
float: left;
font: 14px verdana;
height: 18px;
margin-bottom: 9px;
margin-left: 10px;
padding: 10px;
position: relative;
text-decoration: none;
transition: all 0.5s ease-in-out 0s;
}
.Label a:hover {
background: none repeat scroll 0% 0% orange;
border-radius: 0px 30px 0px 30px;
border: 1px solid orange;
text-shadow: 5px 5px 5px #DCDCDC;
}
.Label {
margin: 0px;
padding: 0px;
position: relative;
}
.Label li:hover {transform: rotate(5deg);}.Label li {float: left;font-size: 116%;list-style: none outside none;transition: all 0.3s ease 0s;}
0 comentarios:
Publicar un comentario