Let Your Reader Change Your Blog Body Background

Well, I don't advise doing this, but it's quite FUN!
This script will enable your blog reader to choose the color of your blog/template body background. Here is the DEMO. (Scroll down at the bottom of the page.)

How to implement it

JavaScript: 
Paste the code below above the </head>.

<script style='text/javascript' type='text/javascript'>
var backColour = new Array();

backColour[0] = &#39;#FFFFFF&#39;;
backColour[1] = &#39;#000000&#39;;

function changeBG(whichColour){
document.body.style.backgroundColor = backColour[whichColour];
}
 </script>
The RED text is the hexadecimal color value. You can change it whatever you want. Get color values here.
The BLUE serves as the "holder" of the color.


HTML:

<h4 style='text-align:center'>Change background to:
   <a href='#' onclick='javascript:changeBG(0);'>//WHITE</a>
   <a href='#' onclick='javascript:changeBG(1);'>//BLACK</a>
 </h4> 

Notice the BLUE numbers it indicates its responsible color you assign on the JavaScript. In simple terms it receives the color you assign from the JavaScript.
The RED letters, just name the color or you can put a small icon/images equivalent to its color. Use this code:
<img src="LINK OF THE IMAGE">
You can paste the HTML code anywhere you want.


WAIT....THERE'S MORE!


You can add more color by adding  this code on the JavaScipt.
backColour[NUMBER TO HOLD THE COLOR] = &#39;HEXADECIMAL VALUE&#39;;
Just like this:

<script style='text/javascript' type='text/javascript'>
var backColour = new Array();
backColour[0] = &#39;#FFFFFF&#39;;
backColour[1] = &#39;#000000&#39;;
backColour[2] = &#39;#343434&#39;;
function changeBG(whichColour){
document.body.style.backgroundColor = backColour[whichColour];
}
 </script>

and call it in HTML:



<h4 style='text-align:center'>Change background to:
   <a href='#' onclick='javascript:changeBG(0);'>//WHITE</a>
   <a href='#' onclick='javascript:changeBG(1);'>//BLACK</a>
  <a href='#' onclick='javascript:changeBG(2);'>//GRAY</a> </h4> 


That's it folks!

CODES NOT MINE

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables

Hot/Cute flat-chested Girls