Create a Background Slideshow for Blogger

In the previous post, we have seen how to make a blog background full screen regardless of the monitor resolution . Now, the method we'll be using with jQuery is a plugin called BackStretch , which allows you to create a slideshow of your blog's background images without losing the ability to adjust the width and height of your blog's display.

What we are going to do in this post is precisely that: try changing the background image of the blog with a blur effect between each link.
You can see an example on this demo blog .

To place this slideshow in the background of the blog, you just need to go to Templates - Edit HTML and before. add the following code:

Add here the URL of the image that will form the background of your blog.
If you want to add more images, var images = [ :

" image url ",

The images change in the order you add them. If you want them to appear in random order, modify the second part of the code as follows:

You can also add more images by adding a line like this:

image[ 6 ]=" Image URL ";

But you will notice that in this case there are sequential numbers in blue. So if you add something else, e.g. 6, the next should be 7, and so on.

However, you can change the duration of each frame to 5000 at the end of the script.
The advantage of having this slideshow in the background of the blog is that the images are automatically resized to fit the screen, so they will look great regardless of the resolution.

Note that if you're using Scriptaculous you'll need to make some changes, and if you're already using jQuery you 'll only need to maintain one version .

Author page | back extensor