Insertar imagen en cabecera de la plantilla son of moto

Atendiendo a la petición de un lector que quería saber como insertar una imagen en la cabecera del blog , aprovecho y os explico a todos los que tengais la plantilla Son of moto cual es la forma posible de hacer la transformación; a continuación teneis el trozo de plantilla en el que vamos a trabajar, identificarla;


1º.- Espacio de la plantilla donde vamos a trabajar

/* Primary layout */

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}

img {
border: 0;
display: block;
}

.clear {
clear: both;
}
/* Wrapper */

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

/* Header */

#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;
margin: 0 auto;
padding: 0 0 15px 0;
border: 0;
}

#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top left;
}

h1 a, h1 a:link, h1 a:visited {
color: $pageHeaderColor;
}

#header .description {
font-size: 110%;
text-align: left;
padding: 3px 20px 10px 23px;
margin: 0;
line-height:140%;
color: $blogDescriptionColor;
}

2º.-Trabajar la imagen
Lo siguiente que nos hará falta será la imagen que queramos ingresar en la cabecera, antes que nada unos pequeños consejos para que esta no pierda calidad, que la anchura no sea inferior a 500 pixels y la altura nunca debera ser mayor a 200 pixels (porque la plantilla por defecto la estrechará y la imagen quedará distorsionada) Todo esto se puede hacer en un editor de fotos, quien lo tenga no hay problema pero para quien no lo tenga existe en linea la siguiente herramienta en linea que podrá utilizar sin ningún problema, viene en español;podreis cargando vuestra imagen del ordenador redimensionarla y ver como queda, si os gusta y no esta muy distorsionada o pixelada para introducirla en vuestro ordenador. Una vez tengais la imagen a punto nos iremos al siguiente paso.

3º.- Alojar la imagen en Internet
Para ello os vais al servicio de alojamiento de imágenes en internet imageshack una vez cargada vuestra imagen os aparecerá la siguiente pantalla;

Para visualizar mejor, pinchar sobre la imágen

Como veis teneis la última dirección seleccionada en azul; será esta la dirección que trabajemos.

4º.-Cambios en la plantilla;
Vereis que en la plantilla os he señalado dos cosas en la primera eliminamos la url que nos dan y la sustituimos por la url de nuestra imagen quedando así;
#8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) por #8b2 url(http://img517.imageshack.us/img517/5973/prueba1nz2.jpg)
y en la segunda;
url(http://www.blogblog.com/moto_son/topper.gif); hacemos la siguiente operación simplemente eliminamos el contenido de los parentésis, ojo!! Los paréntesis no hay que eliminarlos.

5º.- Visualizar los cambios;
Ya sólo nos queda a darle a guardar plantilla y ver blog Para ver el resultado.

Siempre debeis tener en cuenta que guardando vuestra plantilla en un documento antes de realizar todas estas operaciones os asegura que si os equivocais o no os gusta el resultado os ireis a la plantilla; eliminais todo el código y pegais la que habeis guardado anteriormente; es una forma de trabajar sin presión y realizando los cambios sin miedo a equivocarse.

Acordaros que estos cambios son para la plantilla son of moto;-No os acordais que plantilla teneis? Cuál es la que elegí? Vamos a solucionarlo....
En el código de la plantilla hay un trozo casi al principio como este
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation) Este es el nombre de vuestra plantilla elegida
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Ya lo teneis todo paso a paso, sino sale a la primera probar con la segunda, ya vereis que no necesitareis la tercera ;)