Imagen y fondo de color en los títulos de la sidebar

Colocar una imagen a la derecha del título

[1] En nuestro panel vamos a Edición HTML y localizamos este código:

.sidebar h2{

[2] Colocamos este código justo debajo de esa línea:


background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding: 5px;



En el caso de que .sidebar h2{ no estuviera en el código de nuestra plantilla (como es el caso de algunas plantillas de Blogger) lo incluimos directamente antes de ]]></b:skin> de esta manera:

.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Cambios:

Para eliminar o cambiar el color de fondo, en la línea del background borramos el código del color (#CEF7FF) o lo cambiamos por el del color que queramos.
Para cambiar el color, grosor o aspecto del borde, lo haremos en la línea del border y si no queremos mostrar ningún borde, eliminamos esa línea por completo.

Colocar una imagen a la izquierda del título

El código a usar entonces, sería algo como esto:


.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}



Cambios:

Los cambios que podemos hacer son casi los mismos que antes, si os fijáis en el código la única diferencia está en la línea del padding.

En esa línea tendríamos que poner, en lugar del 35px, el mismo valor o incluso algo más que el ancho de la imagen que vamos a usar para separarla del título.

Colocar una imagen distinta en cada título a derecha o izquierda


[1] Localizamos el código de cada gadget con los artilugios expandidos, que empezará por algo como esto (ejemplo de gadget HTML):


<b:widget id='HTML2' locked='false' title='Menú del blog' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

La línea que está destacada en negrita, es la que corresponde al título del gadget y como podéis ver he marcado en naranja la clase que tiene añadida (class='title').


[2] Cambiamos la clase del título (class='title') por otra, por ejemplo class='TitleIcon' y colocamos estas líneas de CSS antes de ]]></b:skin> en la plantilla si queremos mostrar la imagen a la derecha del título:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Si vamos a mostrar la imagen a la izquierda del título, entonces tendría que ser algo como esto:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}

Algunos gadget como el de Archivos por ejemplo, podrían no tener una clase añadida en el código del título:

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Se la añadimos:

<b:if cond='data:title'>
<h2 class='Archivo'><data:title/></h2>
</b:if>

Y seguimos el mismo método que para los demás gadget:

.Archivo {
background: #FF99CC url(url_de_la_imagen) no-repeat right;
border: 1px solid #999900;
padding:5px;
}