Bloggers always wish to give the users the content that is fresh and interesting. What if you provide your blog that is new every time they visit! Interesting right? Yes, you can do it with few simple steps and create a new blog each and every time you refresh your Blog. This can be done with the help of the CSS tricks, that the background colour your blog post changes each time visitor visits or refreshes the page. You don’t need the help of any Blogger Plugins or Blogger Widgets to do this. In this post, I will make you do Automatically Change Background Colour trick with few simple steps.

How Background Colour Changes Automatically?

First of all, I will let you know the fact behind this trick. It is done with the help of a jQuery script that automates the background colour to change every time. The jQuery makes the change every time the blog is refreshed.

The user will experience an especial background that is fresh and new. This will make your readers follow your blog regularly so that your blog’s fan club becomes bigger.

How to Automatically Change the Background Colour?

Go through these simple steps that will guide you to change your background colour of your blog posts automatically.

Step 1: Sign In to your Blogger Account and go to your Blog in which you need to perform this.

Step 2: From the left pane click the Template.

Step 3: Click Edit HTML to make the edit.

Step 4: Click anywhere into the HTML coding. Now use Ctrl + F and search for the <head> tag within the HTML script.

Step 5: Once you find the <head> tag paste the below code from the snippet just above the <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 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 6: If your template already has the jquery.min.js then use the code from the following snippet.

<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 7: Click Save Template.

An example of how this works is given by a gif below.

Automatically Change Background Colour in Bloggger

Automatically Change Background Colour in Bloggger

I hope this post would help you grab more users and delight them with your posts that recreates every time.

Pin It on Pinterest

Share This