Add Random Rotating Images for Blogger Header
Your website's header is usually the first thing your visitors see and can be their basis for determining if your site is good or not. The good thing about the blogger platform is that it gives you the ability to add header image but only one static image. Today, I am going to explain in this tutorial how to add random,rotating images for your blogger header background.

After you added this feature to the blogger blog header, the image of your blog will rotate or change in each page refresh. Before doing this trick you must create header images for your blog. In this tutorial I am going to show how to rotate 5 header images and that sounds good, right? You will surely enjoy seeing the header of your blog and sharing this to your friends will also amaze them.

I will make it easier for you to understand everything so that when you are going to apply this to your site things will work out right. Ready for the tutorial? Make sure that you have complied with what is required above. If you are done, you can continue reading below. Hope you like it!

Here's how to Add Random Rotating Images for Blogger Header

Step 1. Log in to your dashboard--> Design- -> Edit HTML
Step 2. Scroll down to where you see <body> tag.
Step 3. Now copy below code and paste it just after the <body> tag.

NOTE :Replace "URL-OF-HEADER-IMAGE-X" with your image URLs.
If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section).

You can add different number of images than 5. But remember to change "4*Math.random()" according to the number of images you add.For example,when you want to add 8 different images for your blog header background, then code should be change as "7*Math.random()".Look at the example below:


Step 4. Now save your template and your done.Refresh your site few times to see the result.Your header image should be  be rotating now.

NOTE: If you DON'T know how html or javascript languages work, I would recommend finding someone to help you install this code. It may or may not work based upon your particular blog settings, and I cannot offer tech support to problem solve issues that might arise after installation.
Note: If you have further questions and suggestions about adding random rotating images just post comment below, thanks 
The Author

I'm Frank from Philippines. born on July 20, 1986 Author of www.theblogservices.net. I was a blogger since July 2010, I have a great passion about blogging and all other stuff online. Follow Me on Google+ or Like our official FB Page HERE

Related Post


  1. This is very helpful thanks for this!


  2. Hi,
    I wanted to try your code. But I cannot find the "body" tag in the HTML code body. Is it possible that the blogger HTML code has been updated since your post? Should I be looking for some other tag?

    1. Ctrl+f then find /body and add the code above it