Ponerle cabecera a la plantilla Dots

Me preguntan esta tarde como poner una imagen en la cabecera de la plantilla Dots de Blogger. Esta plantilla no tiene cabecera por lo que es imposible añadir una imagen con el nuevo sistema que nos ofrece Blogger.
Los que usen esta plantilla y quieran tener la posiblidad de añadir de esta manera la imagen a su blog, tendrán que añadirle una cabecera a su plantilla:

Paso I

Vamos a plantilla -html, y buscamos esto en el CSS casi arriba del todo:

#header-wrapper {
display: none;
}

Eliminamos esa parte del código y lo sustituimos por esta otra:

#header-wrapper {
width:700px;
background:#ffffff;
margin:0 auto 10px;
border:1px solid ;
}
#header {
margin: 5px;
border: 1px solid ;
text-align: center;

}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {

text-decoration:none;
}
#header a:hover {

}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
}

Abajo, en el html de la plantilla, buscamos esto:

<div id='outer-wrapper'><div id='wrap2'>

Y justo después de esas líneas, añadimos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>
<b:widget id='Header2' locked='false' title='XXXXXXXXXXX (Header)'
type='Header'/>
</b:section></div>

Donde aparecen las XX es donde luego saldrá el título del blog una vez guardados los cambios, no hay que hacer nada, sale automáticamente.

Ya tenemos la nueva cabecera, y ya podemos subir una imagen desde el PC con el nuevo sistema de Blogger, se verá así más o menos:


Si queremos quitarle los bordes en #header-wrapper { y en #header { cambiamos en "border" el 1px por el 0px.

Paso II (opcional)

Ahora eliminaremos la antigua cabecera que está al principio de la sidebar, para hacer esto iremos de nuevo a la parte del CSS y localizaremos este código, eliminándolo por completo:

/* Title & Description
----------------------------------------------- */

.Header h1 {
margin:0 0 .5em;
line-height: 1.4em;
font: $pagetitlefont;
color: $pagetitle;
}
.Header h1 a {
color:$pagetitle;
text-decoration:none;
}

.Header .description {
margin:0 0 1.75em;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}

Más abajo dentro del código HTML, localizamos en el comienzo de la sidebar la línea que corresponde a la cabecera antigua y la eliminamos:

<b:widget id='Header1' locked='false' title='XXXXXXX (cabecera)' type='Header'/>

Cuando intentamos guardar los cambios, nos aparecerá un mensaje que nos advierte de que la cabecera va a ser eliminada:

Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

* Header1