Cambiar la cabecera por una imagen (Plantillas Minima) -44-

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 las plantillas Minima (Dark, Blue, Ochre, Lefty).
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 Minima tienen un borde, 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:

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

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

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

Aquí tenemos que cambiar el valor del border de header-wrapper y header. Entonces el nuevo valor para los dos será: border:0 (sin px).

2. 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>

3. 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 660 px y un alto de 110 px. 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