Imagen de fondo aleatoria en el blog

Previamente aprendimos a insertar una imagen de fondo aleatorio a los títulos de la sidebar (barra lateral).

En esta entrada veremos la forma de añadir varias imágenes de fondo al blog y que aparezcan de forma aleatoria cada vez que el sitio web se actualice o se navegue entre su contenido.

Puedes ver un ejemplo en este blog (el cual deberás actualizarlo varias veces para comprobar que la imagen de fondo cambia correctamente).


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> e inserta este script justo encima:

<script type='text/javascript'>
var blimgaleat= new Array()
blimgaleat[0]=&quot;URL DE LA IMAGEN 1&quot;
blimgaleat[1]=&quot;URL DE LA IMAGEN 2&quot;
blimgaleat[2]=&quot;URL DE LA IMAGEN 3&quot;
blimgaleat[3]=&quot;URL DE LA IMAGEN 4&quot;

var random=Math.floor(Math.random()* (blimgaleat.length));
document.write(&quot;<style>&quot;);
document.write(&quot;body {&quot;);
document.write(&#39; background:url(&quot;&#39; + blimgaleat[random] + &#39;&quot;) repeat center;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

Reemplaza URL DE LA IMAGEN por la dirección de las imágenes de fondo. En el código he insertado un total de cuatro líneas que mostrarán cuatro fondos distintos de manera aleatoria.

Si te fijas, la primera línea tiene el valor 0 en el atributo blimgaleat[0] pero en realidad es la primera imagen.

Para añadir más imágenes bastará con insertar líneas como esta:

blimgaleat[4]=&quot;URL DE LA IMAGEN 5&quot;

Y sustituir las cifras numéricas por las correspondientes.

Guarda la plantilla para terminar...