How to Randomize Background Color of your blog in Blogger

Advertisements
Decorating your website with attracting colors has always been the first priority of a blogger. Uses like attractive designs they want to see things in an appropriate manner. In fact, those websites which has laboriously old appearance, finds it difficult to get any sorts of user engagement.  This is the reason, why people always prefer Professional templates and themes for their website. Recently, one of our readers requested us on twitter whether she can use random background color every time someone reloads the page. Therefore, today in this article, we will show you How to Randomize Background Color of your blog through jQuery in Blogger. 

Following is a rough screenshot of the request which we received from one of our reader via twitter. At first we thought it is quite impossible, but lastly we were able to pull it off so without any further due let’s directly get to our tutorial. 

The first thing you need to do is to add a JavaScript file to your template. So, go to Blogger.com >> your site >> Template >> Edit HTML >> Proceed. Now within the template, search for the ending </head> tag. After finding the ending </head> tag just above it pastes the following JavaScript coding and press “Save Template” button to finish the process. 

<script>
$(function() {
    function randomColor() {
        return 'rgb('+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+')'
    }
    $('body').each(function(i) {
       $(this).css('background', randomColor());
    });
});
</script>

Now, whenever you or someone else would navigate your site on every page they will notice different background color. The colors would keep on rotating automatically, until or unless you remove the script from the template.

We hope this small but useful trick would help you in adding some extra spark to your blog. Every time you load it, you see a new design. Our team is currently working a script that could help you in rotating Image backgrounds every time someone reloads the page. Feel free to leave your suggestions by commenting below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

9 comments

March 29, 2013 at 7:31 PM

wao thats good, will it make any effect on loading or anything else.

March 29, 2013 at 8:13 PM

it's nice trick syed, it means if i am using image as page background, it would not work?

March 29, 2013 at 8:55 PM

Yes it will because of jQuery , but the effect is very negligible :)

March 29, 2013 at 10:53 PM

Cool Post . Faizan , just wanted you to know that your interview is live again .

Plus I want to congratulate you on the new awesome design of your blog .
You and your team are doing great .

Editorial Team MOD
March 30, 2013 at 3:23 AM

It would override your CSS. So, it would work on image background too. However, it is better to remove the image background.

Editorial Team MOD
March 30, 2013 at 3:23 AM

I don't think so, Its just a minor jQuery.

March 23, 2014 at 5:22 AM

this is a WOW post bro!
thank you :)

June 6, 2014 at 7:40 AM

Nice trick.

September 26, 2015 at 1:44 PM

I want random color for Lables....

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.