Imágenes aleatorias en la cabecera

En relidad este pequeño truco vale tanto para imágenes como texto, pero normalmente es el tema de poder situar una cabecera aleatoria para el blog para lo que más se suele usar este tipo de scripts. Este truco consta de dos partes. Un primer script que colocaremos por ejemplo en la cabecera y justo debajo la segunda parte del código.

Evidentemente tendremos que tener al menos un par de imágenes preparadas que tendremos que subir a la red. La primera vez que usé este truco usé a blogger como host de las imágenes subiéndolas en un post y luego copiando el código, pero no se por qué, ahora con la nueva versión de bloger eso no funciona así que las podremos subir a imageshack o cualquier otro servicio de hospedaje de imágenes.

Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:

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

Eliminamos esa línea con lo que ya no se mostrará el título del blog en la cabecera. Ahora es el momento de ir a la página de diseño e introducir en la cabecera este elemento como HTML/JavaScript:

<!-- CODIGO DEL SCRIPT DE IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<!-- FIN DEL SCRIPT DE IMAGEN ALEATORIA -->

Guardamos los cambios y añadimos la segunda parte del código de la misma manera, pero asegurándonos de que quede justo debajo del anterior.

<!-- PARTE II: SCRIPT IMAGEN ALEATORIA -->
<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>

<!-- PARTE II: FIN DE SCRIPT PARA IMAGEN ALEATORIA -->

Sustituímos las zonas coloreadas de rojo por la direccón de la imagen que hemos subido y voilá. Ya tenemos una cabecera con imagen aleatoria en el blog.

Si queremos añadir más imágenes tenemos que ir añadiendo líneas de código para cada una de ellas y poner el número total de ellas en el valor randRange(1,nºtotal de imágenes)