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

Comments

  1. Anonymous7/16/2012

    If you wish for to get much from this post then you have
    to apply these techniques to your won blog.
    Here is my website Clearblue Easy Fertility Monitor Reviews

    ReplyDelete
  2. Anonymous9/30/2012

    Can you add a cookie to this please?

    ReplyDelete

Post a Comment

Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.

Popular posts from this blog

Auto-calculate your Splinterlands Assets/Income

Creating a Simple Button for Demo

Splinterlands: Water Deck for Beginners