Espera unos segundos se esta Cargando...

Etiquetas con efecto hover en el blog

7 de marzo de 2016




Blogger predefine el widget de etiquetas o categorías tipo lista, para darle estilo y dividirlo en dos columnas hay que:
  • Ir a Plantilla.
  • Personalizar y llegaremos hasta el 
  • Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
  • Avanzado, abajo del todo encontrarán una opción que dice 
  • Añadir código CSS personalizado, en el recuadro

/*- Etiquetas -*/
#Label1 ul li{
float: left;
width: 45%;
}
#Label1 li{list-style: none;
margin: 0px!important;
padding: 0px!important;
}
#Label1 li a{
display: block;
width: 100px; /* ANCHO DE LINKS */
background: #ccc; /* FONDO DE LINKS */
color: #000000; /* COLOR DE LINKS */
border-left: 0px solid #eee; /* BORDE DE LINKS */
margin-bottom: 3px;
font: 9px verdana;
padding: 7px;
padding-left: 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
/* LINKS HOVERS */
#Label1 li a:hover{
background: #f4915f;
box-shadow: inset 0 0 16px #f0a882, 0 0 0px #f0a882;
border-left: 10px solid #f0a882; /* BORDE DE LINKS */
color: #000000; /* COLOR DE LINKS */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
letter-spacing: 0px;
}

Para  finalizar Aplicamos al blog

Este es el resultado












-

No hay comentarios -

Publicar un comentario

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger