Imagen como título de widget

Hey babies! He tratado de empezar este post ya ni se cuántas veces, pero bueno, supongo que no siempre una puede estar inspirada XD. 

En este post traigo un tutorial que hice en un antiguo blog que tenía y he decidido rescatarlo por si os interesa usarlo en vuestros blogs, digamos que es un tutorial back in the day porque lo hice hace casi 10 años (lol como pasa el tiempo), así que he tenido que reinventarlo un poco porque hay partes que, con el nuevo diseño de blogger no se podían hacer, así que ha tocado improvisar.

Ah! Para que sepáis de qué hablo, es esto:

1. Antes de empezar, es importante tener las imágenes ya listas y una vez hechas subirlas a algún servidor donde sepáis que no se van a borrar, yo siempre recomiendo imgur.

2. Ahora vamos a identificar los ID de los widgets que nos interesa tener una imagen. ¿Y cómo se buscan? Aquí yo recomiendo que todos vuestros widgets tengan un nombre para poder identificarlos bien (ya luego lo podéis cambiar). 

3. Ahora vamos a Tema > Personalizar > Editar HTML y arriba a la derecha de nuestra plantilla veremos cinco opciones, la que nos interesa es la siguiente:

Que tiene como título Ir al widget, si le damos, se nos desplegará una lista con todos los widget que tienes en tu plantilla. Dejo aquí un ejemplo de cómo se ve:

Por ejemplo, yo sé dónde tengo los afiliados porque pone: <b:widget id='HTML2' locked='false' title='afiliados ♥;' type='HTML'>, lo que está en negrita es el título de widget.

Aquí recomiendo hacer una lista de esos widgets, por ejemplo:

HTML2 ➡ afiliados
HTML1 ➡ about

4. Una vez tengamos esa lista hecha vamos a Tema > Personalizar > Editar HTML y buscar /* Headings y justo debajo pegar el siguiente código:

#IDGADGET {
background:url(URL DE LA IMAGEN)no-repeat;
width:326px;
height:74px;
margin-top:-5px;
margin-left:-36px;
margin-bottom:0;
color:transparent;
}

5. Ahora solo hay que añadir tantas veces el código como imágenes queramos o tengamos y cambiar el IDGADGET por el de nuestra plantilla (por ejemplo, yo tendría que poner HTML2 si quiero cambiar el de afiliados). Luego hay que cambiar el tamaño height (altura) y width (anchura) por el de la imagen y luego ajustarlo con margin-top, margin-left (se puede cambiar por right para ponerlo a la derecha) y margin-bottom e ir ajustándolo hasta que quede a vuestro gusto.

Os debería quedar algo así:

Y listo. Sé que es algo complicado, pero es que blogger lo ha complicado todo mucho más estos últimos años...