Imagen de fondo aleatoria en la cabecera de Blogger
Siguiendo con la lista de cambios que llevo haciendo en diseño del blog esta nueva temporada, ahora he añadido el que la imagen de la cabecera del blog cambie aleatoriamente cada vez que se visita el blog o se accede a un post concreto. Y por si a alguien le interesa, voy a explicar la forma en que lo he hecho.
Buscando un poco en Internet para ver cómo lo habían hecho otras personas (no necesariamente con Blogger) me encontré con dos opciones. En las dos opciones intervienen tanto CSS como Javascript. Éstas son:
- Predefinir con CSS un estilo (con una imagen de fondo) para la cabecera, y al cargar la página, mediante Javascript, redefinir ese estilo (para cambiar la imagen) accediendo a los elementos de la cabecera (a partir de identificadores, objetos, atributos, valores...).
- Asignar a la cabecera un estilo inexsistente, y al cargar la página, mediante Javascript, generar un trozo de código CSS que defina ese estilo con una imagen aleatoria cada vez.
Lo que necesitamos a priori es:
- Saber un poco de CSS y Javascript.
- Que el blog tenga ya una imagen de fondo en la cabecera, y que las imágenes que vayamos a usar tengan esas mismas dimensiones.
- Disponer de un espacio público en Internet donde alojar las imágenes (y un pequeño fichero Javascript que facilitará el trabajo).
- Que las imágenes (y el fichero Javascript) sean accesibles a través de URLs del estilo:
- http://servidor/mis/imagenes/imagen0.jpg
- http://servidor/mis/imagenes/imagen1.jpg
- ...
Entonces, la forma de proceder es la siguiente:
- Publicar las imágenes que queramos.
- Generar un fichero Javascript (yo lo he llamado mylib.js) y publicarlo también. El fichero Javascript con el siguiente contenido:
var NUMBER_OF_IMAGES = 5;
function createClassRandomImage() {
imgId = Math.floor(Math.random() * NUMBER_OF_IMAGES);
document.write('<style type="text/css">\n');
document.write(' .random_image { background-image: url("http://servidor/mis/imagenes/imagen' + imgId + '.jpg"); }\n');
document.write('<\/style>\n');
}
createClassRandomImage();
function createClassRandomImage() {
imgId = Math.floor(Math.random() * NUMBER_OF_IMAGES);
document.write('<style type="text/css">\n');
document.write(' .random_image { background-image: url("http://servidor/mis/imagenes/imagen' + imgId + '.jpg"); }\n');
document.write('<\/style>\n');
}
createClassRandomImage();
- En la plantilla HTML de Blogger añadir antes del final del HEAD la siguiente línea para cargar el fichero Javascript:
...
]]></b:skin>
<script src='http://servidor/mis/imagenes/mylib.js' type='text/javascript'/>
</head>
<body>
...
]]></b:skin>
<script src='http://servidor/mis/imagenes/mylib.js' type='text/javascript'/>
</head>
<body>
...
- También en la plantilla HTML de Blogger (expandiendo los widgets), buscar el siguiente trozo de código, y editarlo añadiendo un atributo class y quitando la url de la imagen original, para pasar de esto:
...
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "
+ "background-position: "
+ data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height + "px;"
+ "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
...
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "
+ "background-position: "
+ data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height + "px;"
+ "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
...
- a esto:
...
<div class='random_image' expr:style='"background-image: "
+ "background-position: "
+ data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height + "px;"
+ "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
...
<div class='random_image' expr:style='"background-image: "
+ "background-position: "
+ data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height + "px;"
+ "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
...
- Guardar los cambios... y ya debería funcionar :)
Posts
No comments:
Post a Comment