Este truco es verdaderamente útil, sobre todo si queremos personalizar el blog.
Comencemos alojando la imagen en un servidor, para poder así obtener su dirección (URL) y realizar el truco.
Algunos sitios para alojar imágenes son:
Tinypic
Photobucket
Imageshack
Blogger también puede servirnos para alojar una imagen.
Seguidamente debes obtener su URL. En caso de no saber cómo conseguirla, mira esta entrada.
A continuación sigue los siguientes pasos:
Diseño>edición HTML>expandimos artilugios
Busca estos bloques de CSS en tu plantilla:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
A continuación añadiremos la línea de fondo (el background).
Es aconsejable que la imagen mida 400 píxeles de ancho (aproximadamente) de manera que no se quede "corta" en la cabecera.
Para que te hagas una idea, en el primer bloque encontrarás la línea width:660px; que indica el ancho de la cabecera. La imagen debería ser similar a ese valor (en este caso 660).
Para poner una imagen de fondo debes agregar la siguiente línea en el primer bloque:
background: transparent url(URL DE TU IMAGEN) no-repeat;
El valor no-repeat (no repetir) indica que la imagen no se repetirá. Si quieres que la imagen se repita (puede servir de utilidad si la imagen es pequeña) cambia no-repeat por repeat.
Sustituye URL DE TU IMAGEN por la dirección de la imagen que alojaste en el servidor.
Puedes ver como he incluido la línea del fondo en el primer bloque:
#header-wrapper {
width:500px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background: transparent url(URL DE TU IMAGEN) no-repeat;
text-align: center;
color:$pagetitlecolor;
}
Si tienes alguna duda o necesitas ayuda puedes consultarme por medio de un comentario.
¿Problemas al comentar? Utiliza 
Hola jaime
si te fijas en mi blog, la cabecera no esta bien centrada, ya que se ven lineas blancas alrededor ademas de un buscador degoogle en verde.quisiera quitarlo y poner una imagen nueva de cabecera, pero quequede ajustada a la perfeccion.Ademas el cuerpo del blog esta dividido en tres (cuerpo y sidebars) me gustaria que entre el cuerpo y las sidebars no se viera la separacion por lines blancas no se si eso se soluciona con un fondo , pero me gustara que quedara mas o menos como el tuyo, para que sea mas agradable a la vista.Y ya puestos, tambien quisieraenmarcar los gagets mas o menos como en el tuyo con una barra chula de seguidores y un marquito chulo.
bueno ya se que pido demasiado, he intentado hacer cosas yo , sin molestarte y algunas me han salido bien pero en otras no me aclaro.
muchas gracias
un saludo
bleid, a continuación te dejo las respuestas a tus preguntas:
1) El buscador de google es un Add, seguramente haya sido añadido por medio de un gadget. En ese caso sólo tienes que eliminarlo.
Para ajustar la cabecera a la perfección ve a Diseño > Edición de HTML y busca el siguiente bloque de CSS:
#header {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://img31.imageshack.us/img31/7839/koti3.jpg) no-repeat scroll left bottom;
height:150px;
padding:0 15px 8px;
}
Cambia el 8 por un 0. si quieres cambiar la imagen, borra la línea http://img31.imageshack.us/img31/7839/koti3.jpg e incluye la url de otra.
2) Para quitar las líneas de separación, busca este bloque de CSS:
#main {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.blogblog.com/rounders4/rails_main.gif) repeat-y scroll 0 0;
padding:0;
}
Y elimina la línea del fondo (marcada en negrita).
Con eso eliminarás las líneas azules del cuerpo de las entradas.
Las líneas blancas no son más que espacio. Podrías agregar el mismo color de fondo que tienes en el main-wrapper al blog.
Para hacerlo busca el bloque de CSS:
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:#FFFFFF url(http://img215.imageshack.us/img215/6872/bgbm7.jpg) repeat scroll left top;
color:#4C4C4C;
font-family:Trebuchet MS,Verdana,Arial,Sans-serif;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
text-align:center;
}
Y cambia #FFFFFF por #E0ECFF.
3) Para enmarcar los gadgets busca este bloque de CSS:
.widget-content {
margin-top:0.5em;
}
Y cámbialo por este otro:
.widget-content {
margin-top:0.5em;
padding: 3px;
border: 1px solid #000000;
}
El color del borde es #000000 (negro). Para cambiarlo usa la tabla de colores.
Al parecer eso es todo. Si necesitas cualquier otra cosilla solo tienes que decírmelo ;).
este </body> no lo encuentro en mi plantilla a igual que los codigos para enmnarcar los gadgets
ASIECAH, no veo el paso en el que se cite dicha etiqueta e incluso dudo que se necesite para realizar este truco. Aún así, prueba a buscar simplemente <body o la línea:
<body expr:class='"loading" + data:blog.mobileClass'>
Recuerda que puedes utilizar el buscador de tu navegador (pulsa las teclas Ctrl y F -simultáneamente- para abrirlo).