Imagen de fondo en los widgets de la sidebar

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Para colocar una imagen de fondo (la misma para todos los widget) en cada uno de los elementos de la sidebar, tendremos que localizar este código dentro de nuestra plantilla:

.sidebar .widget{
margin:0 0 0.7em;
padding:4px;
}

Y aplicarle el background:

.sidebar .widget{
background: url(URL_DE_LA_IMAGEN);
margin:0 0 0.7em;
padding:4px;
}

LiLi mint me pregunta:

¿Cómo es que puedo poner diferentes imágenes en cada una de las cajitas (widgets) del blog.

[1] Una vez situados en nuestro panel de Blogger, vamos a la pestaña de "Diseño" y pinchamos en "Edición de HTML".

Sin expandir la plantilla de artilugios localizamos el código que pertenece a los widget y que, estará representado cada uno, por una línea parecida a esta:

<b:widget id='HTML12' locked='false' title='Mis lecturas' type='HTML'/>

[2] Nos fijamos en la línea del widget concreto al que vamos a ponerle la imagen de fondo, si tiene título añadido nos será mucho más sencillo de localizar.

Una vez localizada la línea, nos fijamos en su id que es siempre distinta para cada widget.

En el caso de mi ejemplo, el id es HTML12

[3] Nos situamos ahora más arriba, en el código CSS de la plantilla y siempre antes de ]]></b:skin> colocamos el código necesario para mostrar la imagen en ese widget concreto:

#HTML12{
background: url(DIRECCION_DE_LA_IMAGEN);
}

[4] Por último tendremos que repetir estos mismos pasos para cada widget al que vayamos a ponerle imagen de fondo.

Una vez aplicadas las imágenes de fondo, tal vez quedarían mas lindos nuestros widget si además les pusiésemos un marco a cada widget como los de mi blog.