Random Background Color for Every Blog Posts

Randomize Background Color of Every Blog Posts
blogger tricks

We have seen many blogger template that use different background color on blog home page. But most of them use manually. But there is a trick that we can change the each blog posts background color by the help of simple Jquery trick. It will make your blog looks different and add some extra spice. This widget code has defined as random math calculation of background. When a visitor enter into the blog then it generate background color randomly. This trick first used by Zoom Template which is currently using Grind Layout template. This trick work best in Grid layout template. However I have implement this code in Magazine style but not looking bad. Here I am sharing with you 2 code block which you can use for displaying the background color only on home page and if you wish you can also display the background color on post body also.

If you are using image as post body background then this tutorial won't work. So check your template before proceed that you are using image or color as background in your blog post body.

To add this trick simply follow the below steps--

Method 1

To apply the random color on blog home page as well as post body then use the below code block.

Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find </Head> by Pressing  Ctrl + F

Step 4 And Paste the below code above </Head>

<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 letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>

Method 2

Method 2

To apply the random color only on blog home page use the below code block. Here just added a conditional tag <b:if cond='data:blog.url == data:blog.homepageUrl'>. The code is same as above.


Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find </Head> by Pressing  Ctrl + F

Step 4 And Paste the below code above </Head>

<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 letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>
</b:if>

Hope this trick would help you make your blogger template more exciting. Though this effect is very negligible by many blogger but if you are maintaining journal or information based blog then I would recommend this for you. If you face any trouble then feel free to contact me. 
Go Up