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(){ $("li.one").click( function(){ $ ("body").removeClass('bg2 , bg3').addClass("bg1"); }); $("li.two").click( function(){ $ ("body").removeClass("bg1 , bg3").addClass("bg2"); }); $("li.three").click( function(){ $ ("body").removeClass("bg1 , bg2").addClass("bg3"); }); }); </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.
Comments
Post a Comment