TRENDING
recent

How To Automatically Change Background Colour In Blogger

colour pencil
Are you willing give something new to your users each time they visit your site? Then today with the help of little CSS trick we will  help you to change the background color of your site every time a visitor visits or reloads a page on your blogger site. So, in order to help you out in it we are sharing this tutorial. Today in this article, we will show you, how to automatically change background color in blogger.


How Changing Background Works?

Before moving towards the tutorial and let us explain that how this method works? Actually, it is jQuery script which automates the process of changing post background colors in jQuery with every refresh. Whenever your blogger post page is refreshed then it changes the color of your blogger site.

That means with every single refresh, your reader will experience unique and new t background color which will surely attract your readers and will make them stick with your posts.


How to Automatically Change Background color in Blogger

So, here are the steps which you need to follow in order to start adding different background colors in any of your blogger site or to add different colors to each of your blogger post automatically.
  1. First of all, Sign in to your Blogger account and click on your blog name. 
  2. After that, you need click on Template from side bar. 
  3. Then, you are supposed to click on Edit HTML.
  4. Now click anywhere your blogger template coding and then Press Ctrl+F and you will have a search bar. Using that search bar, search for </head> in your blogger template and just above it paste the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".post").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>

Note: In case your template already includes a jquery.min.js file then don't add the following line of code in your template because this will cause things to not work.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>

 5. In last, Click on Save Template.

This was our guide, which has made you learn to add appealing background colors to each of your blogger post and experience variations in color with every single refresh. We are sure it would have been proven helpful for you guys. If you have any queries left related to this article then lend your queries in the comment box. We shall get back to your queries as soon as possible.

Was it helpful? If it was then do praise our work by your shares and likes. You may never know that your share may be proven helpful for many of the users out there. So, keep sharing and liking our content over social media.
Gourav Mahajan

Gourav Mahajan

Powered by Blogger.