Imagen en encabezados de widgets

El tema que hoy os traigo lo tengo aplicado en el blog desde hace bastante tiempo pero no me había decidido a compartir la entrada por si a alguien le interesaba hacerlo en el suyo.

No me entretengo más, hoy os voy a explicar cómo agregar una imagen en los encabezados de los widgets/gadgets de nuestro blog.

Lo primero que necesitamos es tener la imagen alojada en alguno de los múltiples servicios de alojamiento que existen … ¿alguna opción? … pues sí, la que recomiendo siempre y que está explicada en anteriores entradas de este blog, la de Skydrive de Windows Live que nos ofrece 25 Gb de espacio.

Con esto, podremos conseguir la dirección URL de la imagen que necesitamos para poder incluirla en los encabezados de los widgets/gadgets del blog.

Una vez que hayamos alojado la imagen y conseguido la dirección URL de la misma, tendremos que acceder a la plantilla HTML de nuestro blog.

Antes de modificarla, como siempre, una copia de seguridad de la plantilla del blog no viene mal por si algo no sale como esperábamos o hay algún problema con la aplicación del código para poder insertar la imagen en los encabezados de los widgets/gadgets.

Con todos estos pasos previos realizados, ahora sí, accedemos a la edición de la plantilla HTML del blog.

Una vez que accedemos a la pantalla de edición del código HTML de la plantilla del blog, sin activar la opción expandir plantillas de artilugios, buscamos el nombre (título) del widget/gadget al que queramos aplicar la imagen. Para que lo veáis con un ejemplo, usaré el nombre del widget/gadget elegido en el ejemplo de la imagen inicial de este post, Enlaza este blog.

Una vez encontrado, nos fijamos en el nombre (id) del widget/gadget. En este caso, el nombre es HTML11.

A continuación, buscamos en el código de la plantilla el término Sidebar Boxes y, en esta sección, insertamos el siguiente código:

#HTML11 h2 {
background: url(“Dirección_URL_de_la_imagen”) left top;
}

Analizando un poco el código insertarlo, lo único que hemos aplicado es una imagen al fondo (background) y hemos alineado ésta a la zona  izquierda superior (left top) del widget/gadget

Para terminar, solo tenemos que guardar los cambios o aplicar de nuevo el mismo código pero cambiando el nombre en el caso de que queramos aplicarlo a más widgets/gadgets.