- ...y, antes de la misma, pegamos el siguiente código:
<style>
dir {
margin: 0; padding: 0;
}
.list-label-widget-content ul {
width:270px; /*Ancho del gadget*/
height: auto;
margin:auto;
padding: 3px 2px;
border: 1px solid; /*Grosor del borde*/
border-color: #000000; /*Color del borde*/
}
.list-label-widget-content li {
width: 125px; /*Ancho del fondo transición*/
height: 20px;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 2px 4px;
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; /*Ancho del fondo fijo*/
height:20px;
display: inline-block;
zoom: 1;
*display: inline;
font: normal;
color: #000000; /*Color del texto*/
text-align: left;
background: #a9d0f5; /*Color del fondo fijo*/
}
.list-label-widget-content li:hover {
height: 20px;
background: #0077E7; /*Color del fondo transición*/
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;
color: #ad0000; /*Color del texto con el cursor encima*/
}
.list-label-widget-content li:active {
height: 20px;
line-height:20px;
text-align:center;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
background: #fe4a4a; /*Color del fondo transición al hacer click*/
}
.list-label-widget-content li:nth-of-type(2n+1) {
text-align: left;
border-right:1px solid;
border-right-color: #000000; /*Color de la línea vertical interna*/
-moz-border-radius:20px 0 0 20px;
-webkit-border-radius:20px 0 0 20px;
border-radius:20px 0 0 20px;
}
.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>
|
- Las líneas del código que se pueden modificar, para adaptar el gadget al diseño del blog, tienen el correspondiente
Comentario al frente.
- Si modificamos el
Ancho del gadget, tendremos que modificar también, y proporcionalmente, el Ancho del fondo transición y el Ancho del fondo fijo, repartiendo la diferencia, por exceso o por defecto, entre éstos dos últimos, en partes iguales. Por ejemplo (tomando como referencia el código del tutorial):
- El
Ancho del gadget es de 270 pixeles. Si lo aumentamos a 300 pixeles le estaremos agregando 30 pixeles.
- El
Ancho del fondo transición, y el Ancho del fondo fijo es, cada uno, de 125 pixeles. Entonces tendremos que aumentarle, a cada uno, la mitad de la cantidad de pixeles que le aumentamos al Ancho del gadget, que son 15 pixeles. Luego cada uno deberá quedar con un ancho de 140 pixeles.
- En caso contario, disminuyendo el ancho del gadget, haremos lo mismo, pero restando pixeles.
- El
Ancho del fondo transición y el Ancho del fondo fijo deben ser iguales, y entre ambos deben sumar 20 pixeles menos que el Ancho del gadget.
|
