Cabecera cambiante en Blogger

Hii ^^ Llevaba mucho tiempo buscando la forma de poner un cabecera cambiante.. y a que no sabéis donde la he encontrado ?_? Pues sí, has acertado, en el mejor blog del mundo mundial: CIUDAD BLOGGER (Pinchando iréis a la entrada donde lo explica El Potro).

¡Cabecera blog cambiante! 

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 entra a Diseño > Edición de HTML y busca:

#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.

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.

Fuente: CIUDAD BLOGGER