How to Change Blogger Post Background Color’s on Refresh Automatically

Recently, I shared an article on how to add your own background for blogger post and pages. Now, I’ve found another best way to change your background while on refresh. In other words, this will allows you to change your post body background color randomly. If you refresh your page, then you will get body color. Awesome ah..? I don’t know maybe someone needs this code for his own personal use so I am just posting it up. Well if you are not getting what I am talking about just check the below screenshot. You can check a live demo by viewing the bellow screenshot.

From the image, the post has random background color. So, while you open your post, then you’ll get the same HEX color for the whole post body. If you like to make your colorful, then you can add this scripts to your blog. Its totally depends on you. Well, I got these codes from Hackinguniversity.in.

You can also add this effect to your blog homepage and to your post body too. Here, below you’ll see two different codes. Among these, one is for your homepage and the other is for your blog post page. You can also add this effect only for your Homepage. Just follow my simple steps given below,

Step 1: Now, go to Blogger > Template > Edit HTML.

Step 2: Then, press Ctrl + F and search for </head> and then paste the below code just above/before it.

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

Step 3: After doing this step, just hit the Save Template button and reload your blog to see the magic.

If you want to add this effect only on your homepage, then use the below JavaScript. Note that this codes will help you to change background only on your homepage. Just do it together.

Step 1: Go to Blogger > Template > Edit HTML.

Step 2: Then, press Ctrl + F and search for </head> and paste the below code just above/before it.

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<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>
</b:if>

Step 3: After doing all the process, just hit Save Template and refresh your blog to see effect.

Awesome!! If you find this tutorial is so useful, then kindly share this with all your friends and do comment if you find any problem. Happy Blogging! Cheers 🙂