Me pregunta BEYOND cómo poner imágenes de fondo en el título de ciertos gadgets.
El truco a continuación se aplica a cualquier gadget del blog y bien puede usarse para poner una imagen decorativa de fondo en el título, o bien para sustituir el título del gadget por una imagen.
Lo primero que hay que hacer es identificar el id del gadget al que se le quiere poner la imagen, para ello entra a Plantilla | Edición de HTML y busca el gadget al que vas a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs.
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog.
Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:
#Label1 h2 {
background: url(URL de la imagen) left top;
color: #000;
}
Y así sucesivamente para todos los gadgets a los que quieras ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.
Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de ]]></b:skin> esto:
#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}
De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora ve a Diseño y da click en Editar en el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:
De esta forma el título del gadget no se encimará con la imagen de fondo.
¿Y qué pasa si quiero aplicarle la misma imagen de fondo a todos los gadgets? En ese caso, para que no tengas que poner un código para cada gadget puedes aplicárselo a todos los títulos de los gadgets de tu blog añadiendo esto antes de ]]></b:skin>
Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.
.sidebar h2 {Este último sólo agregará una imagen de fondo en el título de todos tus gadgets, no cambiará el texto del título, y además, la imagen será siempre la misma para todos los gadgets.
background: url(URL de la imagen) left top;
}
Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.
Entradas relacionadas:
Compartir entrada en:
.
0 100:
Publicar un comentario