Imágenes en el Header

Hay muchas formas de personalizar el HEADER (cabecera) de Blogger Beta, tanto con textos como con imágenes. Lo más importante, es la imaginación, las técnicas son muy simples.

Para empezar debemos comprender qué el HEADER, como cualquier elemento de la plantilla, está formado por bloques DIV, áreas rectangulares definidas en las declaraciones de estilo que poseen ciertas propiedades (ancho, alto, márgenes, color de fondo) y que están uno dentro del otro, separados por una cierta distancia (padding):

el DIV externo:
300 x 90 : padding 20 pixeles
el DIV interno
260 x 50 : padding 20 pixeles

En el caso del Header, al DIV externo se lo identifica (atributo ID) como #header-wrapper y al interno #header. Dentro de este último se insertan el texto del título (generalmente dentro de un tag H1) y el texto de la descripción.

El #header-wrapper tiene, por defecto un ancho definido (width:...px) y, dependiendo de la plantilla, un borde (border:...), un color de fondo (background: #...) o una imagen (background: url(...)). Cualquiera de estos datos puede ser personalizado.

Si lo que queremos es agregar o cambiar la imagen existente, podemos utilizar una imagen completa que abarque todo su ancho lo que significa que deberíamos saber cuál es el tamaño necesario (ancho y alto en pixeles) y luego, agregar o modificar la declaración correspondiente:

#header-wrapper {
.......
background: url(URL_imagen) no-repeat;
.......}

También podemos utilizar un imagen en mosaico (tile), repitiéndola en sentido horizontal, vertical o en ambos sentidos:

repeat-x	repeat-y	repeat

background: url(URL_imagen) repeat-x;
background: url(URL_imagen) repeat-y;
background: url(URL_imagen) repeat;

Mediante rutinas JavaScript es posible cambiar, aspectos de la página, modificando el estilo de los elementos. Si queremos utilizar diferentes imágenes que cambien aleatoriamente, deberemos modificar la propiedad background. Para esto, antes que nada, deberíamos tener subidas las imágenes a ser utilizadas y luego, agregar el siguiente codigo justo antes del tag </head>:

<script type="text/javascript">

var imagen=new Array();

// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
// ....... todas las que se quieran
imagen[7]="URL_imagen7";
// numeradas a partir del cero y en forma consecutiva

var alea=Math.round(Math.random()*CANTIDAD);


// donde CANTIDAD = último número de orden (en este caso, 7)

document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>

NOTA: si usamos imágenes es mosaico, debemos cambiar no-repeat por repeat-x si se quiere repetir horizontalmente, repeat-y si se quiere repetir verticalmente, o repeat si se quiere reptir en ambas direcciones.

Esta variante de la rutina anterior, cambiará la imagen dependiendo de la hora en que se abre la página web:

<script type="text/javascript">
var imagen=new Array();

// lista de imágenes a utilizar
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
imagen[3]="URL_imagen3";
imagen[4]="URL_imagen4";
imagen[5]="URL_imagen5";
// la cantidad depende de como dividamos las 24 horas

var now = new Date();
var hours = now.getHours();
var alea=0

// ... en este caso, hay 6 divisiones
if (hours>0) {alea=0;} // de 0 a 4
if (hours>4) {alea=1;} // de 4 a 8
if (hours>8) {alea=2;} // de 8 a 12
if (hours>12) {alea=3;} // de 12 a 16
if (hours>16) {alea=4;} // de 16 a 20
if (hours>20) {alea=5;} // de 20 a 24

document.write("<style>");
document.write("#header-wrapper {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>

POST-EDICION: si alguien quiere ver un buen ejemplo en acción, Migoz de Los orientales, tiene una página donde implementó el script (fuera de Blogger) y se tomó el trabajo de dividir el día en 24 horas.