HTML Script Code to Change Background Color Automatially on Blogger

HTML Script Code to Change Background Color Automatially on Blogger

Sometimes Your visitors of Your blog may be bored with an old background appearance that You never changed for so long. In a while You as the owner of the blog might be busy to change and modify Your blog's appearance. 

Anyway, there's no problem now, it's because this tutorial will show You how to change the background color automatically, just in one click, You no need to edit the HTML code template, this trick will works whenever Your visitors click on the colors. Check out and click the demo 

 DEMO

To apply this trick is very simple, all You have to do just add the HTML script code and put them on the widget sidebar. Well, here's how it works:

1. Login to Your Blogger account

2. From Dashboard > Design > Page Elements. Then click "Add A Gadget"

3. Choose "HTML/Java Script" 

4. Now You Copy and Paste the code below into the widget box:

<center><script type="text/javascript">
function bgChange(bg) { document.body.style.background=bg; } 
</script>
<table border="1" height="20" style="width: 460px;"><tbody>
<tr> <td bgcolor="white" onclick="bgChange('#FFFFFF')"></td><td bgcolor="#8A2BE2" onclick="bgChange('#8A2BE2')"></td><td bgcolor="#00FFFF" onclick="bgChange('#00FFFF')">
</td><td bgcolor="#000000" onclick="bgChange('#000000')"></td><td bgcolor="#98FB98" onclick="bgChange('#98FB98')"></td><td bgcolor="#B0E0E6" onclick="bgChange('#B0E0E6')"></td><td bgcolor="#87CEFA" onclick="bgChange('#87CEFA')"></td><td bgcolor="#FFDAB9" onclick="bgChange('#FFDAB9')"></td><td bgcolor="#64950" onclick="bgChange('#64950')">
</td><td bgcolor="#FFD700" onclick="bgChange('#FFD700')"></td><td bgcolor="#D3D3D3" onclick="bgChange('#D3D3D3')">
</td></tr>
</tbody></table>
<div class="clear">
</div>
</center>

Note: You may want to custom the size or Height and Width of the widget that suitable for Your Sidebar, and change the color code marked blue color.  For more color codes, just visit  www.html-color-codes.info

5. Now Save the widget