El elemento Header (1)

Siempre he creido que el elemento Header o Cabecera de página es uno de los códigos más absurdos que posee Blogger, difícil de entender [1 | 2 | 3] y aún más difcil de modificar. Por momentos, críptico, se supone que está allí para facilitarnos la tarea y suele tener el efecto contrario; a la hora de personalizarlo, son muchas las preguntas que surgen. Muchas de esas preguntas tienen una raiz común, suponer que el Header es algo diferente al resto, una zona prohibida.

Pero no es así, sólo es una sección como cualquier otra, un rectángulo contenedor donde es posible agregar cualquier otro elemento aunque, por defecto, eso está bloqueado en la mayoría de las plantillas. Para habilitarlo, basta buscar esto:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

y cambiarlo así:

<b:section class='header' id='header'>

de ese modo, aparecerá en Diseño como cualquier otro elemento y podremos agregarle widgets de cualquier tipo.

Otro inconveniente con el que solemos toparnos es cuando queremos colocar una imagen en lugar del título; las opciones que nos muestran son pocas e inflexibles. Obviamente, lo mejor sería eliminar el elemento por completo y usar un código normal o un elemento HTML pero, vamos a partir de no tocar nada, de dejarlo como está y de olvidarnos de las "facilidades" que nos ofrecen.

Para agregar un fondo en el Header no necesitamos otra cosa que subir la imagen en cualquier entrada, copiar la URL y agregarla en las definiciones del CSS:

#header-wrapper {
  ... la pondremos acá ...
}

Sólo hay que tener en cuenta un par de detalles. Si la imagen es un banner que ocupará todo el ancho, lo mejor es establecer la altura del DIV usando la propiedad height. Deberíamos utilizar algo así:

background: transparent url(URL_IMAGEN) no-repeat left 50%;

Si se trata de un logo que ocupa sólo un sector:

background: transparent url(URL_IMAGEN) no-repeat valorpx valorpx;

donde podemos ubicarlo con precisión, estableciendo los datos de valorpx. Por ejemplo, esto la colocará a 10 pixeles del borde izquierdo y a 50 pixeles del borde superior:

background: transparent url(URL_IMAGEN) no-repeat 10px 50px;

Si se trata de una pattern o imagen que se repite, usaremos:

background: transparent url(URL_IMAGEN) repeat left top;

En todos los casos, no es conveniente eliminar la etiqueta H1 que contiene el título del blog, si no queremos verlo, lo mejor es ocultarlo para que los buscadores lo lean aunque no se vea. Eso nos lleva a un segundo punto importante, el header suele funcionar como enlace a la página principal y eso podemos eliminarlo de este modo:

#header h1 {
  .......
    display: none;
}

A mi juicio, lo mejor es preservarlo así que, sin tocar el código del widget podríamos agregar un par de definiciones extras que harán que no lo veamos pero que permanezca allí:

#header h1 {
  .......
  filter: alpha(opacity=0);
  opacity: 0;
}
#header h1 a { filter: alpha(opacity=0); opacity:0; }
#header h1 a:hover { filter: alpha(opacity=0); opacity:0; }