Las posibilidades del header de Blogger

La cabecera de un blog de Blogger parece ser un área restringida, uno de los códigos más extraños que se incluyen de manera automática en cualquier plantilla. En los inicios, el código era un poco más sencillo pero, desde que han decidido que deben ayudarnos a colocar una imagen de fondo en lugar de los textos con el nombre y la descripción, lo han transformado en un galimatías incomprensible.

Por eso es que no solemos meternos mucho con él. Una vez que logramos que la imagen funcione, lo olvidamos. Sin embargo, hay algunas posibilidades que podrían explorarse. Una de ellas es incorporarles la posibilidad de agregar elementos de cualquier tipo, como si fuera la sidebar.

Para esto, lo primero que debemos hacer es dividirlo en dos; por ejemplo, del lado izquierdo dejaremos el header normal y a la derecha agregaremos la nueva sección. Esto, lo haremos en dos pasos sencillos, modificando el CSS y luego agregando la nueva sección en la plantilla.

Blogger se basa en el concepto de secciones que no son otra cosa que áreas rectangulares donde podemos agregar elementos (widgets). El header no es otra cosa que una sección como cualquier otra. Estas secciones, podemos crearlas en cualquier parte, agregándoles los atributos ID y CLASS para poder establecer sus propiedades con CSS:

<b:section class='unaClase' id='unNombre' showaddelement='yes'>
</b:section>

Por defecto, el header tiene una serie de propiedades, y dos de ellas son fundamentales:

#header-wrapper {
  margin: 0 auto;
  width: valorpx;
  ...
}
#header {
  ...
}

#header-wrapper es el rectángulo total, el que dividiremos en dos partes, allí deberemos mirar el valor de la propiedad width que nos dice el ancho total disponible.

#header es un bloque interior, el que contiene la imagen o los textos y, por defecto, ocupa el mismo espacio que el bloque contenedor. Lo "achicaremos" a una medida arbitraria, menor que el total y lo haremos flotar a la izquierda; además, agregaremos un segundo bloque que tendrá las mismas propiedades que el anterior pero, con una medida diferente y flotará a la derecha:

#header {
  float: left;
  width: 600px;
  [... otras propiedades ...]
}
#header-derecho {
  float: right;
  width: 200px;
  [... otras propiedades ...]
}

Luego, SIN expandir los artilugios para no complicarnos la vida, buscamos el siguiente código:

<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:section>
</div>

Y lo modificamos, agregándole la nueva sección:

<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:section>
  <b:section class='header' id='header-derecho' showaddelement='yes'>
  </b:section>
</div>

Si guardamos la plantilla, veremos que esta nueva sección ya está habilitada en la solapa Elementos de la página y, por lo tanto, ahora podemos agregar cualquier cosa.

Hay un ejemplo que puede verse en mi blog de pruebas, donde simplemente he colocado un elemento imagen pero, las posibilidades son muchísimas.