Agregar un banner en el blog

Agregar un Banner es una modificación muy simple, pero esencial a la hora de darle tu propio estilo al Blog. Existen varias formas de hacerlo y muchas explicaciones, por lo que intentare simplificar dos métodos que considero los mas "entendibles": el "Convencional de Blogger" y el "Fácil".

Empecemos por el método que nos proporciona Blogger, no esta de mas decir que si no tienen experiencia les va a facilitar mucho el trabajo. Lo primero que hay que hacer es ir a Diseño y luego a Elementos de la Pagina. Allí encontraran un bloque con el nombre "Titulo de su Blog (cabecera)" hagan click en editar.

Se abrirá un PopUp con este contenido:

Veamos para que sirve cada cosa:

Título del blog: Aquí pueden poner un titulo cualquiera, no tiene que ser el verdadero, pueden poner cualquiera que les guste. Aunque es opcional, si no ponen nada no afecta de ninguna forma.

Descripción del blog: Si quieren pueden escribir una breve descripción de la temática de su Blog. Al igual que el titulo es opcional.

Imagen: Tienen dos opciones
1-Desde tu equipo: Deben tener la imagen en su PC.
2-Desde la Web: O pueden utilizar una imagen que encuentren en Internet.

Si quieren usar una imagen que encontraron por la red, deben asegurarse que la URL la enlaza directamente, para esto pegan la URL en la barra de direcciones del navegador y aprietan Enter, si lo único que ven en la pagina es la imagen la URL es correcta. Yo recomiendo que la guarden en su equipo, y para luego utilizarla con la opción 1.

Ubicación: Aquí tenemos tres opciones
1-Detrás del título y la descripción: Si eligieron poner una titulo y una descripción lo lógico es que tilden esta opción.
2-En lugar del título y la descripción: Si piensas poner algún tipo de Banner, esta es la que debes marcar.
3-Reducir hasta ajustar: Esta opción no tiene nada que ver con la 1 y la 2. Su función es adaptar la imagen para que se adapte al largo del header, seria buena idea tildarla, porque si la imagen es mas grande que la cabecera se ajustara automáticamente sino puede que se visualice mal.

Hasta aquí el método que Blogger piensa que es óptimo, yo prefiero modificarlo directamente en la plantilla, ya que es mucho mas rápido y mas simple si van a utilizar la opción del Banner. Deben ir a Diseño y luego a Edición HTML, una vez allí deben buscar el siguiente código:


/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

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

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

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

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Una vez que lo encontraron lo reemplazan por este:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
background: transparent url(URLdetuBanner.jpeg ) no-repeat;
height: 200px; /* EL VALOR VARIA SEGUN EL ALTO DEL BANNER */
}

Obviamente si eliges esta opcion debes borrar el titulo y la descripcion. Dos puntos a tener en cuenta son: Mi aclaracion [ver], deben asegurarse de que la url es la correcta, otra cosa importante es que el valor que tiene la propiedad width debe ser igual al largo de la imagen, si no saben como hacerlo es mejor que utilicen el metodo de Blogger.

Por ultimo recomiendo hacer una copia de seguridad de la plantilla antes de hacer cualquier modificacion en esta.