Como Poner Una Imagen En El header de Blogger

La pregunta que contesto con más frecuencia es: ¿cómo poner una imagen en el header de Blogger?

Si estamos hablando de una Plantilla Beta estándard, las respuestas posibles son varias, depende del modelo que usemos, algunas sólo contienen textos, otras incluyen fondos y otras utilizan varias imágenes. Me voy a basar en la plantilla mínima porque en ella podemos entender cómo funciona Blogger y qué significa cada código.

Lo primero, es buscar la propiedad que controla el fondo del bloque y modificar o agregar la propiedad background en la parte de estilo de la plantilla (<skin> </skin>):

#header-wrapper {
.......... otras propiedades ..........
width: ANCHOpx;
height: ALTOpx;
background: #COLOR url(URL_imagen) no-repeat;
}

donde, ANCHO, generalmente, es un valor definido y es el que podemos utilizar para crear la imagen y ALTO será el alto de la imagen (el que se nos ocurra). Ambos valores, deben estar expresados en pixeles.

Luego, buscamos en la plantilla el bloque correspondiente del encabezado, para esto, se debe tener activada la opción "Expandir elementos". En este caso, el código que se mostrará es algo similar a esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre (cabecera)' type='Header'>
<b:includable id='main'>
<!-- ========== eliminamos desde acá ========== -->
<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'/>
               </b:if>
          </h1>
     </div>
     <div class='descriptionwrapper'>
          <p class='description'>
               <data:description/>
          </p>
     </div>
<!-- ========== hasta acá ========== -->
</b:includable>
</b:widget>
</b:section>
</div>

donde, borraremos todo lo señalado en rojo. Hecho esto, voilá, tema resuelto.

Pero, a este razonamiento le falta algo: entender qué significa ese código que eliminamos porque, no todas las plantillas son iguales, hay diferencias que pueden confundir y, como si fuera, si nos limitamos a borrar esas líneas, también habremos eliminado una de las funciones de navegación más cómodas de Blogger.

Veamos. Hay dos bloques, el segundo es el más simple, allí, la variable interna <data:description/> "escribe" la descripción del blog, tal cual la ingresamos en las opciones, al eliminar esa parte, ese texto no se mostrará más:

<div class='descriptionwrapper'>
<p class='description'>
     <data:description/>
</p>
</div>

La primera parte es similar, "escribe" el nombre del blog, utilizando la variable <data:title/> pero lo hace verificando una condición, ¿la página que se está mostrando es la página de inicio o es cualquier otra?

<div class='titlewrapper'>
<h1 class='title'>
     <b:if cond='data:blog.url == data:blog.homepageUrl'> 
¿es la página de inicio?
          <data:title/>SI: escribir el título
     <b:else/>
          <a expr:href='data:blog.homepageUrl'>
               <data:title/>
NO: escribir el título pero transformar en un vínculo
          </a>
     </b:if>
</h1>
</div>

Si la página NO ES la página de inicio, el texto del título sirve como vínculo, por lo tanto, si lo eliminamos, perdemos la posibilidad que un visitante regrese a la página de inicio de manera sencilla, haciendo click en el header.

¿Cómo se resuelve? ¿haciendo que la imagen sea un vínculo? No, no se puede ya que si nos hemos inclinado por colocar la imagen en la propiedad background, esta, no existe como un objeto, sólo es el fondo y no puede ser un vínculo.

Las solución es crear un bloque falso, que tenga el mismo tamaño que la imagen y utilizar este bloque como vínculo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div style='width:100%;height:ALTOpx;'/>
<b:else/>
  <a expr:href='data:blog.homepageUrl'>
     <!-- este es el bloque vacío -->
     <div style='width:100%;height:ALTOpx;'/>
 </a>
</b:if>

donde el valor ALTO, es, nuevamente, el alto de la imagen.

Ahora sí, ya podemos guardar la plantilla e irnos a descansar.