Random Background Color for Every Blog Posts

Randomize Background Color of Every Blog Posts

2
data:blog.title
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

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. 
Random Background Color for Every Blog Posts
4 Stars stars - "Random Background Color for Every Blog Posts" We have seen many blogger template that use different background color on blog home page. But ...

Post a Comment

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.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *