Cambiar la cabecera por una imagen (Plantillas Rounders) -48-

Cabecera de página.-Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Rounders (2, 3, 4).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Rounders tienen unas curvas, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

2. Tendrás que eliminar el background de header-wrapper y la url en header. Después cambiar el valor de padding de header. Entonces el resultado seria así:

#header-wrapper {
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("") no-repeat left bottom;
padding:0 0 8px;
}

3. Luego buscas el div con el id header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

4. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

• Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 740px y un alto de 120px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

<img src="http://aquí-tu-imagen" width="500" height="100" />

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen