El header de Blogger (tratando de entenderlo)

De todos los códigos que coloca Blogger en un plantilla cuando insertamos un elemento, el del Header es uno de los más absurdos y engorrosos. Algo que debería ser tan sencillo ocupa líneas y líneas con instrucciones que en realidad hacen muy poco.

En los inicios del llamado Blogger Beta, el código del Header era sencillo pero, para quienes recién comenzaban y no tenían mucha idea de HTML y CSS, personalizarlo se hacía complicado, sobre todo a la hora de agregar una imagen en lugar de los textos que se veían por defecto (el título del blog y la descripción). Con criterio de desarrolladores, en lugar de explicar en alguno de sus sitios oficiales cuáles eran los métodos para hacerlo, decidieron "ayudarnos" y hace ya un tiempo, cambiaron los códigos para "facilitarnos" las cosas.

El problema con este tipo de cosas es que ellos no comprenden que no hay forma de contemplar todas las posibilidades y de allí que ahora resulte más engorroso que antes a la hora de personalizarlo o bien, se produzcan errores que parecen no tener explicación y que a veces no tienen una solución lógica.

De las 20 lineas de código original pasamos a tener más de 50 sin beneficios aparentes.

El código original

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombreBlog (cabecera)' type='Header'>
<b:includable id='main'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <!-- +++++++ si es la página principal +++++++ -->
        <data:title/>
      <b:else/>
        <!-- +++++++ en cualquier otra, el header es un enlace a home +++++++ -->
        <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>

El código nuevo

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombreBlog (cabecera)' type='Header'>

<b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "REPLACE"'>
      <!-- +++++++ el código para cuando la opción es mostrar sólo la imagen +++++++ -->
      <div id='header-inner'>
      <a expr:href='data:blog.homepageUrl' style='display: block'>
      <img expr:alt='data:title' 
           expr:height='data:height'
           expr:id='data:widget.instanceId + "_headerimg"'
           expr:src='data:sourceUrl'
           expr:width='data:width' style='display: block'/>
      </a>
      </div>
    <b:else/>
      <!-- +++++++ el código para cuando la opción es combinar imágenes y textos +++++++ -->
      <div expr:style='"background-image: url(\""
            + data:sourceUrl + "\"); "
            + "background-position: "
            + data:backgroundPositionStyleStr + "; "
            + data:widthStyleStr
            + "min-height: " + data:height + "px;"
            + "_height: " + data:height + "px;"
            + "background-repeat: no-repeat; "' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  <b:else/>
    <!-- +++++++ el código para cuando la opción es mostrar sólo los textos +++++++ -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- +++++++ si es la página principal +++++++ -->
    <data:title/>
  <b:else/>
    <!-- +++++++ en cualquier otra, el header es un enlace a home +++++++ -->
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>

</b:widget>
</b:section>
</div>

Si todo funciona bien, no hay problema. Las plantillas traen ese código por defecto así que basta ir a Diseño y en la solapa Añadir y organizar elementos de la página hacemos click en Editar la cabecera y aparecerá una ventana con las opciones:

Título del blog y Descripción del blog son los que hayamos puesto en la Configuración pero podemos colocar cualquier otro texto ya que esto sólo será lo que se muestra y no el nombre real.

En ambos casos es posible utilizar algunas etiquetas HTML para formatear esos textos. En general, son las mismas que pueden utilizarse en los formularios de comentarios: <b> (negrita), <i> (itálica), <u> (subrayado), <a href=""> (enlace).

Todo lo demás es para definir una imagen de fondo y allí hay varias opciones. Debemos saber que la imagen a utilizar se alojará en Blogger. Puede ser una que tengamos en nuestra PC o bien una imagen que ya esté en la web y para lo cual lo que debemos hacer es escribir la dirección URL.

PROBLEMA: Aparece un error en la carga. Esto puede ser debido a muchas causas, algunas nuestras, otras de Blogger. Una de las más comunes es indicar una dirección URL errónea. La dirección debe ser la de la imagen y no la de una página web como pasa con muchos servicios de alojamiento de imágenes. Para saber si es correcta o no, escribamos esa URL en la barra de direcciones del navegador y hagamos que la muestre. Se deberá ver la imagen sola o bien nos preguntara si queremos descargarla.

Una vez subida se nos mostrará una previsualización de esta y allí, podremos Eliminarla y cancelar el proceso o aceptarla en cuyo caso deberemos marcar una de las opciones para determinar si nuestro Header incluirá también el título o sólo la imagen:

Detrás del título y la descripción
En lugar del título y la descripción

Por defecto, aparecerá marcada la primera así que, si lo que estamos poniendo es algún tipo de banner, lo normal es marcar la segunda opción.

Antes de subir la imagen también aparecerá otra casilla que podemos marcar:

Reducir hasta ajustar

Y se nos advierte que la imagen se reducirá hasta una cierta cantidad de píxeles de ancho. Esa es la medida que tiene nuestra plantilla establecida en la propiedad width del bloque #header-wrapper así que variará con las diferentes plantillas.

PROBLEMA: Algunos desarrolladores de plantillas no respetan los nombres de ID usados por Blogger y entonces no son detectados. No existe ningún problema en hacerlo de este modo pero, debemos saber que algunas funciones del editor visual de la plantilla sólo funcionan si se mantienen los nombres por defecto de los elementos.

Guardamos y tenemos la imagen colocada como fondo.

PROBLEMA: La he subido, todo es normal pero en el blog no se ve. Lo más probable es que el navegador nos esté mostrando la caché y no nuestro blog (a los navegadores no les gusta trabajar mucho). Primero se puede probar con CTRL + F5 para recargar; si sigue sin verse, lo mejor es borrar la caché.

Hasta acá, eso es todo lo que podemos hacer con esa ventana pero, lo más probable es que necesitemos ajustes y entonces, ya no queda más remedio que ir al código HTML y allí, mirar las propiedades CSS.

PROBLEMA: Me arrepentí y no puedo eliminar la imagen. Esto es un error de Blogger y no hay muchas alternativas; lo mejor es eliminar el Header y colocar uno nuevo ...

Primero, vamos a la plantilla y sin expandir los artilugios buscamos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>

Y lo cambiamos por esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='(Header)' type='Header'/>
</b:section>
</div>

Guardamos y ahora vamos a Elementos de la página.

Lo que hemos hecho es desbloquear la sección header y permitir que se agreguen elementos. Ahora, sólo hay uno así que lo editamos y lo eliminamos con Borrar Elemento. Por último, volvemos a editarlo. Haciendo click en Agregar Elemento, seleccionamos Header y listo.