Colocar imagen como cabecera del blog

Para empezar tenemos que alojar la imagen que queremos en algún alojamiento de archivos y,si es gratuito mejor ¿no? yo uso siempre Imageshack y nunca me ha dado problemas, está en inglés pero tiene una interfaz muy intuitiva, o sea, que es fácil de manejar.
Cuando tengas tu imagen alojada copias su ruta.Vas al panel de control de blogger pinchas en “Plantilla” y a continuación en “Edición HTML”.
Buscas el siguiente código:

#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ñades la url tu la imagen para que aparezca como fondo, dentro del bloque “header”, si quieres eliminar los bordes,borra la línea “border”: border:1px solid $bordercolor;Si tu imagen mide 660px de ancho perfecto, sino puedes establecer otro ancho, si lo que quieres cambiar es la altura puedes añadir el valor height, especificando la altura que quieres. Yo hice mi propia imagen, así que le di el tamaño de la cabecera de plantilla.
Quedaría así:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background-image: url(http://URL DE TU IMAGEN);
text-align: center;
color:$pagetitlecolor;
}

Usando la vista previa puedes ir variando el alto y el ancho según lo necesites para adaptar la imagen, ya sabes: ancho-width, alto-height.

Nota:
Aunque Blogger actualmente permite subir una imagen directamente a nuestro header desde el panel de edición de elementos, este sistema puede seguir usándose si necesitas añadir la cabecera directamente en el código de la plantilla.

This entry was posted on Sunday, March 8th, 2009 at 3:18 pm and is filed under blogger, diseño, general, plantillas. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.