Widget Let readers decide your background color

As with one of our previous gadget (Let readers decide your text size) this one is a similar one .This widget allows your reader to change background color of your blog with a click on images or simle text.

This will make your blog look attractive and the readers can not only read your content but can play with your blog too.
We will do it  through a java script function that will overwrite body's background color,and works even if you have an image in background.

You can see a working Example By clicking on the Color of your like.



Like this ?Now add to your blog.....

 <div style="text-align:center;"> Do not like the background color?<br />¡Cámbialo por otro!</div><br /><center> Change it for another! </ Div> <br /> <center><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqIriYVikdKxfpJbROJfTZP8Ms_QTECEGh8JphAax6OYjthGuoeMvOtpkHVDbJxEIXLkiCyGJ_WOxPz3dKjFKCNn7WmmR9Hw4i30U3TUy3Mbnpb9CvLu7ZSUKmLFdYQD5UpGfbQdlhocA/s200/body-rojo.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"> <img src = "http://4. bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPG9CfdL6c91CdYrg6Vhe37eiPLkOCQltGKTnJZ6fqlsTXv9gZdGpOFYPYFzDx_jZOloCOJhoKJ_W2s7Mlvg8qJx9DCi7SPLQ7_pNyIxpDeG55LxWxsnSvC4MXPg5SSr19d-kEZJCu0HNw/s200/body-amarillo.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"> <img src = "http://2. bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQD89jrxJG1_wNRKWj-i59BnUR8Ix8wvwAhjGW1iowxMFkUGcnB3yaCc0jD8QO8WLB8zi1mJ7Yog1CVbXcbbMvUPqx4KHKFhdoWaYi19LvDvn8-gLfJtLRGi4tz9fTWAHeCbuwaMO1G56_/s200/body-verde.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"> <img src = "http://2. bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4pIhzbv0GdTcrS3fza6qu2OtmlFzOzWRO5SkP49Lz-CwMeBTHu3iYU-seToBKLvl29flK2gKTl_oNvLsMtg6umY2Gel6mzu6GKHBwI2yUYFOz7udIotJawr667T-QHHubnH7jfmB4VCk5/s200/body-azul.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"> <img src = "http://4. bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hAwUOl2SAsap24ecDNF4Q1YzIXqBv0ymX8zLL27S2-P3VkuVpj_ds8dRx8e4oovHr587-s5Z43UoaGE_mWP2c6NfBspLXPINra3MYnBHL5Fp_fSWbaITXkixF7v8miTuzBjyDS68GDWW/s200/body-morado.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"> <img src = "http://2. bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyhILz67KzWrzZP4SDkrWD90IKDNrktp1M3H9AzdF2Ka9mh4YSl7UoF_uoNnzyUNbMIFMNSwUZRoL8xQukjeE5-7NbEZolP9lFz8rJ5tXf37MNqkSldw5B-A-85SwpbZBBUU8wUlOwGYY/s200/body-rosa.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"> <img src = "http://1. bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBAP7DBoSPYKw18Zzv-Di7r1eDI-hrqnb45KAgG0aQHdm4kRISwjmBprRnoAjGu6B95JDMZpP4EVo1FlIf-si_LMNv-gVvWMN54EsWwlrxJ0KUxNSY4IimbcAlfjyOiv_8fsg1_ffh4BUP/s200/body-negro.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"> <img src = "http://2. bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png "/> </ a><br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrRg9uAP4mtMwbeQZ3CH4l5XP7zyELTTZ44MIitAX6XZ5_uud9wpiOactR9ktAf495zgq4wbvJ40LPbOPLkBBYmzmQfEJcAMQtxzHqPc1q_RF1QAhpH9TWjtVd_9RKa15hePXCfkG5ugm/s200/body-blanco.png" /></a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"> <img src = "http://2. bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png "/> </ a><br /></center> </ center><span style="font-size: xx-small;"><a href="http://myfundoo-blog.blogspot.com/2010/02/widget-let-readers-decide-your.html">Background color widget</a></span>
 
To add this widget to your blog go to page element >> Add Gadget >> Html/Javascript And paste theabove  code.Click save.

IF you want you can put it as plain text like an example shown below.

Red |Amarillo | Yellow |Verde | Green |Azul | Blue |Morado | Purple |Rosa | Rosa |Negro | Black |Blanco White 

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"> Red </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarillo</a> | <a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"> Yellow </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> | <a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"> Green </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> | <a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"> Blue </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Morado</a> | <a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"> Purple </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> | <a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"> Rosa </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Negro</a> | <a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"> Black </ a> |<br /><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Blanco</a> <a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"> White </ a><br /><br /><span style="font-size: xx-small;"><a href="http://myfundoo-blog.blogspot.com/2010/02/widget-let-readers-decide-your.html">Background color widget</a></span>

You can add or remove colors by  adding or removing anchor tag something like shown below.Chnage hexadecimal value and change corresponding text.

<a href="#" onclick=quot;javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"> Blue </ a>