Cambiar el título del blog por una imagen en la nueva versión de Blogger -26-

Para alojar una imagen puedes usar Imageshack o Photobucket. En cambio, si quieres que sea en blogger debes crear una nueva entrada o post. Desde ahí, subes una imagen al editor y después te vas a Edición de HTML, para copiar la ruta de la imagen.

1. Lo siguiente que debes hacer es ir a Plantilla (Template), luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:

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

2. Una vez ubicado el código, tendrás que borrar <data:title/> para luego agregar el siguiente código: <img src="http://Aquí-la-dirección-de-tu-imagen" /> y a su vez reemplazar la URL de la imagen que has subido en ImageShack, Photobucket o en Blogger.
Así que lo único que tienes que hacer es sustituir los dos códigos(<data:title/>). Esta modificación hará que la imagen aparezca en el título.
Ejemplo:

<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'>
<img src="http://spiderman3.jpg" />
<b:else/>
<a expr:href='data:blog.homepageUrl'><img src="http://spiderman3.jpg" /></a>
</b:if>
</h1>
</div>

Nota:
- Cuando borras los dos códigos (<data:title/>) prácticamente se borra el título del blog.

- En cuanto lo que es ancho y alto tendrías que calcular tu imagen al subirlo en un hosting, para que te quede perfecto. En todo caso si te es muy difícil, puedes hacer lo siguiente:
En <img src="http://Aquí-la-dirección-de-tu-imagen" /> agrégale width y height.
Ejemplo:
<img src="http://spiderman3.jpg" width="100" height="250" />

- Probablemente algunas plantillas no tienen el mismo código que les he puesto, pero tienen algo parecido. Sin embargo, incluyen <data:title/>.

**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: /