Imagen en la cabecera (Plantilla 897 de Blogger)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me han llegado varias peticiones por email sobre como se podría cambiar la cabecera de la plantilla 897 por una imagen.

1- Buscamos esta parte de CSS en la plantilla- html Y sustituimos la url que viene por defecto en Blogger por la de tu imagen, ten la precaución de que la imagen tenga el mismo ancho que la cabecera más o menos, la anchura podemos variarla añadiendo en #header h1 {, el valorheight:100px; y cambiando 100 por la anchura de nuestra imagen.

#header h1 {
background:url("URL DE LA IMAGEN QUE QUIERAS PONER") no-repeat left top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
}

2- Si quieres eliminar el cuadrado de al lado con la estrella, borras esta parte del CSS (está justo encima de #header h1 {:

#header .titlewrapper {
background:#269 url("http://www.blogblog.com/no897/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
Usamos la vista previa y si está correcto guardamos cambios.

3- Luego has de eliminar el título del blog (si quieres, claro). Expandimos plantilla de artilugios y buscamos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nnnnnnidododdd (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>

Borramos la última línea, la de data:title. Usamos la vista previa y si está correcto guardamos cambios.

4- Si también queremos eliminar las dos barras que están debajo de la cabecera con la descripción del blog, buscamos esto en el CSS:

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #88ddff url("http://www.blogblog.com/no897/bg_desc_top.gif") no-repeat left top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
}
#header .description {
background:url("http://www.blogblog.com/no897/bg_desc_bot.gif") no-repeat left bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www.blogblog.com/no897/temp_no.gif") no-repeat left center;
/* Keep everything below */
display:block;
padding:0 0 0 160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}
Y lo eliminamos por completo.
USAMOS LA VISTA PREVIA ANTES DE GUARDAR NADA.