- ...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.
|
10 comentarios :
Para qué pones un demo, sí solo es para "invitados"?
No se puede ver el Demo, el Blog que lo contiene solo permite invitados, configura ese Blog, o direcciona el Demo a otro lado!
Pilar y Neytor, discúlpenme fue un descuido mío. Ya pueden ver el Demo.
Saludos.
como se hace para ponerlo en dos columnas como en el DEMO?
Profe Juan, obviamente que si se siguen las instrucciones tal como se indica en el tutorial el resultado es un gadget con lista de dos columnas, ya que el Demo es resultado de lo explicado en el tutorial.
Lo que pasa es que se debe tener cuidado con las medidas; la suma de los anchos correspondientes a los fondos transición y fijo no debe ser mayor al ancho del gadget, porque una columna desplazará a la otra quedando una sola. Antes por el contrario esa suma debe ser un poco menor que el ancho del gadget.
Si aplica las medidas tal como se indica en el tutorial le deben quedar dos columnas. Si va a poner un gadget más ancho o más angosto debe modificar las medidas, guardando las proporciones, como se indica en el ejemplo del tutorial.
Saludos.
Y qué pasa si sólo quiero aplicar este efecto a una sección de etiquetas; yo uso dos en mi sitio (país y género) y sólo me gustaría aplicarla a género. Mi sitio es: http://ergofelixculpa.blogspot.com/
Saludos
Ergó Felix Culpa,
Tendría que ponerle a las entradas pertenecientes a "género" esa etiqueta (género), y en el gadget de las etiquetas hacer lo que se indica en el tutorial, pero en "Selecciona las etiquetas que quieras que aparezcan" seleccionar la etiqueta "Género" y las otras etiquetas que tengan cada una de las entradas pertenecientes a esa sección, cuidando que esas mismas etiquetas no las tengan ninguna de las entradas de la sección "país".
Saludos.
Me parece muy interesante esta entrada. Tengo una duda respecto a cómo entrar al Editor de HTML en Diseño. No lo encuentro, realmente. ¿Utilizas la interfaz nueva de Blogger, o todavía se puede acceder a la vista clásica? Te agradecería que me lo pudieras especificar
La De Música, desde Diseño no puedes acceder directamente al Editor de HTML. En el menú de la izquierda (estando en Diseño), debajo de la pestaña Diseño está la pestaña Plantilla, haces click en esa pestaña y, posteriormente, en la página que se despliega, haces click en la pestaña Editar HTML, ahí está el Editor de HTML.
Te presento disculpas porque en la ruta indicada en el tutorial faltaba el paso "Plantilla".
Saludos.
Hola Pedro, muchas gracias por el tutorial! quisiera hacer un par de modificaciones, en vez de tenerlo en columnas me gustaría que se viera como el menú superior (en una hilera) para se pueda sustituir al acceso a las páginas estáticas. Es posible? y la segunda, me gustaría que no se moviera cuando paso el cursor, que quedase fijo. muchas gracias!!
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.