Change the background in Blogger by clicking on the link

So, with the help of Jquery, we can create a very simple widget for blog visitors with which they can change the background.

In the picture on the left, I took ordinary links as an example and only 3 colors, you can insert thumbnails and as many colors as you want. But you will need a little coding for that.

Let's begin.

1. Go to Template and save the existing template

2. Check the box next to: "Expand widget templates"

3. Find (Ctrl + F) in the template line: ]]></b:skin>

4. Before this line, add this code:

.bg1 {background: url(BG IMAGE URL) repeat-x; background-color: #FFFFFF;}
.bg2 {background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00;}
.bg3 {background: url(BG IMAGE URL) repeat-x; background-color: #00345B;}

In this code, you can only change the colors and these are the numbers at the end (#FFFFFF).

5. Find the following: </head>

6. Before this line, copy this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){ 

        $(&quot;li.one&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&#39;bg2 , bg3&#39;).addClass(&quot;bg1&quot;);
    });

    $(&quot;li.two&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg3&quot;).addClass(&quot;bg2&quot;);
    });

    $(&quot;li.three&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg2&quot;).addClass(&quot;bg3&quot;);
    }); 

});
</script>

Don't change anything here.

7. Now add this simple HTML code to your Widget or in some post etc.

<ul>
<li class="one"><a href="#">Red</a></li>
<li class="two"><a href="#">Brown</a></li>
<li class="three"><a href="#">Blue</a></li>
</ul>

Here you change the word at the end of the line, that is, enter the name of the color you entered in the first code.

If you do not understand:

If we are e.g. in the first code in the first line enter the color #FFFFFF then we will type in the first line

<li><ahref=<"#">White</a></li>

Because code #FFFFFF gives white color.