[Tutorial] Poner imagen de fondo a un gadget [100% MÍO]

Hoooola! Aquí estoy con otro tutorial jejeje esta vez es de como poner una imagen de fondo a un gadget!! Aquí una imagen de ejemplo...

Me gusta bastante este tutorial ya que deja el blog mas original ^^ Bueno, aquí teneis las instruciones para poner este efecto~

1. Primero vamos a Plantilla > Editar HTML y buscamos el código del gadget en cuestión: lo encontraras buscando el título que le hayas puesto al gadget! (Ctrl + F) Por ejemplo, si quiero quitar el fondo del gadget "Afilados" pues lo buscare en el HTML, encontrando algo similar a esto:

<b:widget id='HTML1' locked='false' title=‘Afilados’ type='HTML'>

Afilados: Este es el titulo que le he puesto al gadget al que quiero reducir el margen que nos pone Blogger.
HTML1: Nombre que le ha puesto el HTML al gadget.

2. Una vez que tenemos el nombre del gadget del HTML (HTML1) vamos a Plantilla > Editar HTML  > Buscamos ]]></b:skin> y encima pegamos este código:

#HTML1{
background: url(Url de tu botón);
}

Para coger la URL, mirar ESTE TUTORIAL.

3. Si elegimos un color muy distinto al que tenemos y tenemos problemas con el color de la letra o con el color del borde del gadget, podemos ampliar el código para resolver esos problemas...

#HTML1{
background: url(Url de tu botón); /*URL imagen de fondo*/
border:2px solid #ccc; /*Tamaño del borde (2px), estilo de la línea (solid), color del borde (#ccc)*/
font:30px Tutan #ccc; /*Tamaño letra (30px), estilo letra (Tutan) y color (#ccc)*/
}

4. Por último, comprobamos que todo esta correcto mirando en el Vista Previa, y guardamos!
Hasta otra~!!!