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.)
The BLUE serves as the "holder" of the color.
HTML:
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:
WAIT....THERE'S MORE!
You can add more color by adding this code on the JavaScipt.
and call it in HTML:
That's it folks!
CODES NOT MINE
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'>The RED text is the hexadecimal color value. You can change it whatever you want. Get color values here.
var backColour = new Array();
backColour[0] = '#FFFFFF';
backColour[1] = '#000000';
function changeBG(whichColour){
document.body.style.backgroundColor = backColour[whichColour];
}
</script>
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] = 'HEXADECIMAL VALUE';Just like this:
<script style='text/javascript' type='text/javascript'>
var backColour = new Array();
backColour[0] = '#FFFFFF';
backColour[1] = '#000000';
backColour[2] = '#343434';
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
If you wish for to get much from this post then you have
ReplyDeleteto apply these techniques to your won blog.
Here is my website Clearblue Easy Fertility Monitor Reviews
Can you add a cookie to this please?
ReplyDelete