Headers (cabeceras) que cambian automáticamente

Bueno, el título lo dice todo, este fantástico truco nos da la opción de poder darle un aspecto más "vivo" a nuestro blog, se trata de headers (cabeceras) que van cambiando automáticamente cada vez que navegamos por el blog...

(1) Lo primero debes preparar las imágenes que aparecerán en la cabecera. Intenta que tengan el mismo tamaño.

(2) Las subiremos a un servidor, (blogger nos sirve) como Tinypic para poder obtener después la url.

(3) Si estás listo y tienes todo preparado, ¡manos a la obra!

Diseño>edición HMTL>expandimos artilugios

Buscaremos en la parte del CSS el bloque que representa al header.

Empezaría con la línea #header { y terminaría con una llave }

Elimina el bloque por completo y pon este en su lugar...

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

Ahora guardamos Cambios.

Busca la etiqueta </head> y antes pon este script:

<script type="text/javascript">
var banner= new Array()
banner[0]="URL DE IMAGEN"
banner[1]="URL DE IMAGEN"
banner[2]="URL DE IMAGEN"
banner[3]="URL DE IMAGEN"
banner[4]="URL DE IMAGEN"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

En URL DE IMAGEN debes escribir la dirección (URL) de tus imágenes.

Ten en cuenta que puedes poner las imagenes que quieras pero siempre has de tener un numero por debajo del total, lo puedes comprobar, el primero empieza en 0 y después sigue normal...

Eso es todo, ¡Suerte!