How to Automatically Change Background Color in Blogger

Advertisements
Are you willing give something new to your users each time they visit your site? Then today with the help of little CSS trick we will  help you to change the background color of your site every time a visitor visits or reloads a page on your blogger site. So, in order to help you out in it we are sharing this tutorial. Today in this article, we will show you, how to automatically change background color in blogger.

How Changing Background Works?

Before moving towards the tutorial and let us explain that how this method works? Actually, it is jQuery script which automates the process of changing post background colors in jQuery with every refresh. Whenever your blogger post page is refreshed then it changes the color of your blogger site.

That means with every single refresh, your reader will experience unique and new t background color which will surely attract your readers and will make them stick with your posts.

How to Automatically Change Background color in Blogger

So, here are the steps which you need to follow in order to start adding different background colors in any of your blogger site or to add different colors to each of your blogger post automatically.
  1. First of all, Sign in to your Blogger account and click on your blog name. 
  2. After that, you need click on Template from side bar. 
  3. Then, you are supposed to click on Edit HTML.
  4. Now click anywhere your blogger template coding and then Press Ctrl+F and you will have a search bar. Using that search bar, search for </head> in your blogger template and just above it paste the following code:

<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>

Note: In case your template already includes a jquery.min.js file then don't add the following line of code in your template because this will cause things to not work.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>

      5. In last, Click on Save Template.

This was our guide, which has made you learn to add appealing background colors to each of your blogger post and experience variations in color with every single refresh. We are sure it would have been proven helpful for you guys. If you have any queries left related to this article then lend your queries in the comment box. We shall get back to your queries as soon as possible.

Was it helpful? If it was then do praise our work by your shares and likes. You may never know that your share may be proven helpful for many of the users out there. So, keep sharing and liking our content over social media.

Related Topics:

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

3 comments

September 29, 2015 at 9:36 AM

Very Nice article. Thanks for share this article with us. I have a blog http://www.techhelper.in please suggest me an blogger template which should i use for my blog. Can you give me copy of your blogger template. If you can then I'm very thankful of you. Thanks once again to MYBLOGGERLAB Team.

May 7, 2016 at 9:14 PM

we can do that with css also

body {
animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
-webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
-moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
-o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}

@keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
0% { background-color: #fbcf61; color: #fbcf61; }
20% { background-color: #6bd57e; color: #6bd57e; }
40% { background-color: #ff6f6f; color: #ff6f6f; }
60% { background-color: #57cff4; color: #57cff4; }
80% { background-color: #0ed4c8; color: #0ed4c8; }
100% { background-color: #fbcf61; color: #fbcf61; }
}

Editorial Team MOD
May 27, 2016 at 11:32 PM

Thanks for the tip.

Cheers

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.