Colocarle imágenes a los títulos de los gadgets

El primer paso es identificar el ID del gadget al que se le quiere colocar la imágen, para ello entramos en  Plantilla | Edición de HTML y SIN marcar la casilla de expandir artilugios buscamos el gadget al que vamos 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: #fff000;
}


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 imágen.
Ahora vamos a Diseño y damos click en Editar en el gadget al que le cambiamos el fondo y borramos 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.                   
Firma Post


No hay comentarios:

ir arriba