Imagen de fondo en los widgets de la sidebar de Blogger

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.

 

Compartir Enlace