Cabecera del blog cambiante (al azar)

Con unos pocos pasos podemos hacer que la cabecera del blog (header) tenga una imagen distinta cada vez que alguien entra a la página. En este caso la cabecera tendrá cinco imágenes distintas para poder mostrar cada vez que alguien entra al blog.

Primero necesitas tener las imágenes que vas a utilizar para el header, todas deben tener el mismo tamaño (ancho y alto) y deben estar alojadas en algún servicio de alojamiento. Si no sabes cuál es la medida de la cabecera de tu blog entra a Diseño > Edición de HTML y busca esto:

#header-wrapper {
width:660px;

En este caso el ancho de la cabecera es de 660px, si tuviera una altura predeterminada dira también height, sino puedes usar la altura que quieras.

Ya teniendo las imágenes entra a Diseño > Edición de HTML y SIN marcar la casilla expandir artilugios busca esta parte:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre del Blog (cabecera)' type='Header'/>
</b:section>

Ahora cambia el 'no' que está en negrita por 'yes' y elimina lo que está el color rojo. Luego guarda los cambios, te avisará que se suprimirá un artilugio, dale aceptar.

A continuación entra a Diseño > Elementos de la página y verás que la cabecera ha desaparecido, en su lugar aparece un recuadro que dice Añadir un gadget, da click ahí y selecciona HTML/Javascript. Ahí pega lo siguiente:

<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

<script language="javascript" type="text/javascript">
var randHdr = randRange(1,5);

if (randHdr == 1) {
document.write('<img src="URL DE LA IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL DE LA IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL DE LA IMAGEN 3">')
} else if (randHdr == 4) {
document.write('<img src="URL DE LA IMAGEN 4">')
} else if (randHdr == 5) {
document.write('<img src="URL DE LA IMAGEN 5">')
}
</script>

Ya sólo cambia lo que está en rojo por la URL de la imagen y listo. Puedes ver un ejemplo funcionando en este blog de pruebas, al entrar verás una cabecera, presiona F5 para que se recargue la página y verás otra distinta.

Si quisieras agregar o quitar imagenes de la cabecera sólo quita o agrega (según sea el caso) esta línea del código del script:

else if (randHdr == 6) {
document.write('<img src="URL DE LA IMAGEN 6">')
}

Si agregas más fíjate que la línea que agregas tenga un número consecutivo, en este caso el 6
De igual modo si agregas o quitas imágenes cambia esta parte del script:

randRange(1,6)

Donde está el 6 es el número de imágenes que se mostrarán.