Poner una nota en nuestro blog

Poner una nota en nuestro blog,con una imagen en el fondo es relativamente sencillo.
Lo primero que tenemos que hacer es elegir la imagen que vamos a utilizar.
Aquí hos dejo algunas.

La primera parte es irnos a Diseño > Añadir un Gadget y ponemos un título a nuestro Gadget.
Yo en mi caso he usado notas.
Guardamos.
El segundo paso es irnos a Tema > Editar Html y buscamos con las teclas CTrl + F el titulo que hemos puesto a nuestro Gadget.
Encontraremos este Código.

<b:widget id='HTML5' locked='false' title='Nota' type='HTML'>

Tenemos que tener en cuenta lo marcado en Rojo.
 El tercer paso es buscar en nuestra plantilla ]]></b:skin>

y justo antes pegamos este código:

 /* Notita o post-it*/
#HTML1 {
background: transparent url(url_de_la _imagen) no-repeat left top;
width: 320px; /*el ancho del widget*/
height: 279px; /*el alto importante para que se vea la imagen completa*/
margin: 0;
padding:0;
}
#HTML1 h2{
position:absolute;top:-9999px; left:-9999px;/*aquí eliminamos el título.Si lo quitaste, no necesitas poner esta regla y que he resaltado con fondo amarillo*/
}
.nota{
margin: 0;
padding: 45px 32px 0 24px; /*padding para ajustar el texto*/
font-size: 14px; /*el tamaño del texto*/
color: #2b1f19; /*el color del texto*/
line-height: 140%;
}

 

Tenemos que tener en cuenta lo marcado en rojo para cambiarlo por el que identifica a nuestro gadget.

En mi caso HTML5.

Guardamos y listo.

En el gadget anterior que habíamos creado, lo editamos para ajustar el texto.

Dentro pegamos este código.

 <div class="nota">
aquí todo mi contenido...</div>

 

 En lo marcado en azul ponemos el contenido que queremos.

Guardamos y listo.