Fondo de un contenedor al azar en Blogger

Hace algún tiempo atrás expliqué un script para que el fondo del blog cambiara de manera aleatoria mientras se cargaba la página (Tutorial), en esta oportunidad les enseñaré a establecer una imagen de fondo aleatoria a cualquier contenedor, ya sea a la cabecera, la sidebar, etc.



Para ello utilizaremos un script un poco diferente al anterior, el cual define un ID y no una etiqueta.

Puedes ver un ejemplo del script mediante el siguiente contenedor (Actualiza la página para ver el efecto):

Nota: En el ejemplo tarda un poco en previsualizar el script, pero si se inserta directamente en la plantilla no ocurre esto.


En "Diseño | Edición HTML" buscaremos el siguiente código:

</head>

Arriba de este pegaremos alguno de los siguientes:

Para color de fondo aleatorio:

<script type="text/javascript">
window.onload = function () {
    var header = document.getElementById('header-wrapper');
    var fondo = new Array('#33CC00','#663366','#CC0000','#FF6600','#CC9900');
    var variacion = fondo.length;
    if (document.images) {
        var colorestablecido = Math.floor((Math.random() * variacion));
        header.style.background = ' ' + fondo[colorestablecido] + ' ';
    }
}
</script>

Para imagen de fondo aleatoria:

<script type="text/javascript">
window.onload = function () {
    var header = document.getElementById('header-wrapper');
    var imagen = new Array('URL-IMAGEN-1','URL-IMAGEN-2','URL-IMAGEN-3','URL-IMAGEN-4','URL-IMAGEN-5');
    var aleatorio = imagen.length;
    if (document.images) {
        var randomizee = Math.floor((Math.random() * aleatorio));
        header.style.background = 'url(' + imagen[randomizee] + ')';
    }
}
</script>

Edita los valores correspondientes y posteriormente guarda los cambios.

• Reemplaza el valor header-wrapper (Por defecto la cabecera) por el ID correspondiente a la sección a la que desees aplicar el script.