Change Blog's Background Color Automatically with JavaScript

change blog background automatically
Web designing is a field that amuses people now a days. As the internet usage has grown dramatically all over the globe and people now can find everything free of cost on the internet. Now even a 10 years kid can become a web designer within few months. The internet itself provides you opportunities to learn everything free of cost and within very less time. If you need a trick or something useful then just make a search on Google and whatever you will ask Google, it would have that. So now come to the today's topic, today I'm going to share a web designing tutorial with you. This tutorial is about changing your website or blog's background color automatically with a piece of JavaScript's code. You can use this tutorial for blogger blogs and other manually created websites. I've been asked by many readers of that where to use JavaScript practically, so here we go, the practical usage of JavaScript.

JavaScript enables you and the visitors to interact with your pages and insert some functionality inside your website or blog. In blogger we mostly use JavaScript in the <head> section of our blog. Also for best results JavaScript is always used in the Head section. Our today's tutorial will show you how to change the background color of a blog or website automatically by using JavaScript. Now lets start how to do it.
Wait, before going to learn the tutorial, first check a demo for this tutorial: DEMO

How to change blog's background color automatically?

In order to change the background of a blog automatically, you'll have to add some piece of JavaScript's codes inside your template. You can also use this code in a simple notepad file and check it wither it's working or not. For adding this code to your blogger blog, follow steps below: 
  • Go to Blogger Dashboard
  • Template >> HTML >> Proceed
  • Find this </head> by using CTRL+F
  • Just copy the below code and paste it before/above </head>
function setbackground(){
window.setTimeout( "setbackground()", 2000);
var index = Math.round(Math.random() * 9);
var ColorValue = "#E6A9EC";
if(index == 1)
ColorValue = "#7FFFD4";
if(index == 2)
ColorValue = "#FFF8DC";
if(index == 3)
ColorValue = "#8B008B";
if(index == 4)
ColorValue = "#00CED1";
if(index == 5)
ColorValue = "#FF00FF";
if(index == 6)
ColorValue = "#E0FFFF";
if(index == 7)
ColorValue = "#DB7093";
if(index == 8)
ColorValue = "#FF6347";
if(index == 9)
ColorValue = "CCCCCC";
  • Now after adding this code in the <head> section, save your template and then once again search for <body> tag in your template, just replace <body> tag with this one given below:
<body onLoad="setbackground();">
  • Save Template and you're done.. See your blog and Background color will be changing automatically after  two seconds.


You can change all the colors according to your desired ones, all bolded and colorized colors are the color that will automatically change after 2 seconds. So you can find a lot of more color by visiting this link, The time for changing colors automatically is set to 2 seconds only, so if you want to increase it then change the 2000 value to 3000 or according to your needs; 1000 means one second.

What we've used in JavaScript?
We used a self created functions [setBackground()] and inside that we used a default function [window.setTimeout] and a variable, to which we assigned some values. That's all.
Remember: Some templates might have the body tag like this: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> in this case the code won't work. You can only use this code in a template that is having <body> tag alone.

Need More Help?
If you need further help regarding this tutorial or about this blog then simply drop your comment below the post. Thanks for being here with us.

0 komentar:

Post a Comment