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.
EmoticonEmoticon