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 🙂