Home
Blogger

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. 

2 comments

  1. An awesome code brother. I used very similar code long time ago for changing the background color of page after every refresh. Now, you have made it to suit the Blog Posts.
    However, use of excessive javascript or jquery makes negative impact on page load speed. Another issue with JS and Jquery enabled websites or blog is the change in their look and feel, when opened via a browser which either doesn't support these scripts or user disables these script. For making better, we use if condition. This is probably the reason why, famous designers suggests you to make use of CSS,CSS3,HTML5 more than js or jquery.

    Does it change its behaviour in Browsers where JS is disabled?
    • Hi Ravi thanks for your nice comment. Obvious the code won't work if JS disable. Because you would see at the beginning of the code block

      http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

      so if Java Script disable then it won't load with blog. Ultimately it will not work.

      CSS doesn't require any hosting, and it doesn't affect the browser loading time. You would see in this code Jquery 1.5 has hosted on ajax.googleapis.com... but here uses minimized script for better performance.

      Most of the browsers are giving problem for support any widget. So its better to use Webkit supported browser like Google Chrome, Safari. Due to bad impact of jquery everybody diverted to CSS only for unsupported by browsers. Because it work in all browsers.
Go Up