Poner imagen en los títulos de los gadgets

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 Diseño > Edición de HTML y SIN marcar la casilla de expandir artilugios 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 > Elementos de la página, 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:

&nbsp;

De esta forma el título del gadget no se encimará con la imagen de fondo.

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.

Posted in: Efectos,zona de blogger