Blogger header with random background images
This post is a translation/summary of my original post in Spanish.
I will explain how to get a different random image as background image of the Blogger header. Searching a little bit on Internet I found 2 variants for achieving it, both with Javascript and CSS:
- Defining for the header a CSS style (with a background image), and when the page is loaded, using Javascript for redefining the style (changing the image). This implies accessing to header's elements (through ID, objects, attributes...).
- Assigning to the header a "new CSS style", and when the page starts loading, using Javascript for generating the "new CSS style" with the new background image.
- Some knowledge about CSS and Javascript.
- A background image for the header already set, and the rest of images with the same dimensions.
- Some kind of hosting service in order to put the images (and a small Javascript file).
- Free access to these images (and the file) trough URL like:
- http://server/my/images/image0.jpg
- http://server/my/images/image1.jpg
- ...
- Publish our images.
- Generate a Javascript file (I named it mylib.js) and publish it too. This file with the following content:
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://server/my/images/image' + 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://server/my/images/image' + imgId + '.jpg"); }\n');
document.write('<\/style>\n');
}
createClassRandomImage();
- Inside Blogger template, add before the end of the HEAD the following line in order to load the Javascript file:
...
]]></b:skin>
<script src='http://server/my/images/mylib.js' type='text/javascript'/>
</head>
<body>
...
]]></b:skin>
<script src='http://server/my/images/mylib.js' type='text/javascript'/>
</head>
<body>
...
- Also inside Blogger template (with widgets expanded), search the following piece of code, and edit it adding a new "class" attribute and removing the URL of the original image. That is, from this:
...
<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'>
...
- to this:
...
<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'>
...
- Save the modifications... and it should work :)
Posts
No comments:
Post a Comment