Fondo de un contenedor al azar en Blogger

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):
Este contenedor cambia aleatoriamente de fondo....

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

El tutorial:

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.

Importante:
  • Reemplaza el valor header-wrapper (Por defecto la cabecera) por el ID correspondiente a la sección a la que desees aplicar el script.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger