Reinos Infernales

Antes de empezar lo más lógico es tener preparadas las imágenes que vamos a emplear. En este ejemplo vamos a hacerlo con tres, pero pueden añadirse más si se necesita, os aconsejo que las imágenes tengan el mismo ancho (width) que la cabecera (header) y, por supuesto, que todas ellas tengan las mismas medidas (alto y ancho).
Una vez obtenidas las imágenes necesarias, las subimos a un servicio de alojamiento (ImageShack, Photobucket, etc.) para obtener la url de cada una de ellas.

[1] Nos situamos en nuestro panel Diseño -> Edición de Html y sin expandir artilugios localizamos el widget de nuestra cabecera:

<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>

Tendremos que borrar esa línea, con lo que nuestra cabecera anterior desparecerá, así que al ir a guardar los cambios, Blogger nos dirá que "Están a punto de suprimirse los artilugios, pinchamos en "Confirmar y guardar".

[2] Justo sobre esa línea que acabamos de eliminar, hay otra que hemos de modificar en el caso de que tengamos en ella showaddelement='no', tendremos que poner yes:

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>

[3] Vamos ahora a la parte de diseño de nuestro panel, e incluimos un nuevo elemento HTML en nuestro header, con este código en su interior:

<!-- IMAGEN ALEATORIA -->
<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,3);

if (randHdr == 1) {
document.write('<img src="URL IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL IMAGEN 3">')
}
</script>
<!-- FIN DE IMAGEN ALEATORIA -->

Nota:
Para añadir más imágenes tendremos que añadir uuna línea de código para cada una de ellas, al código anterior:

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

En randRange(1,nºtotal de imágenes) pondremos el número total de imágenes que vamos a mostrar.

Pagina de la Información