Changing Backgrounds Dynamically On Blogger Using Jquery

change-bg-dynamically
I've been quite busy over the past few weeks with my clients and articles on SML. Today, I found sometime to work out a simple trick based on Jquery - Changing Backgrounds Dynamically. Well, I hope you read the article about "Adaptable View On Blogger" wherein, I mentioned we can tweak the design of our blog dynamically. We'll be using the same concept in this article as well...

I don't want to take too much of your time. So, I'll just explain the basics about the working of the script. The script will add or remove classes to the body element based on what list item the user clicks on. That's it. So, take a look at the demo of this simple effect by visting the link below and we'll get started...

CHANGING BG COLOR DYNAMICALLY - LIVE DEMO

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Paste the following piece of code just above the line mentioned step 1.
.bg1 { background: url(BG IMAGE URL) repeat-x; background-color: #6c0000; }
.bg2 { background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(BG IMAGE URL) repeat-x; background-color: #00345B; }
3. Next, search for the following piece of code.
</head>
4. Paste the following piece of code just above the line mentioned in step 3. Save your template.
<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>
Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor or on  the sidebar or below the content wrapper.
<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>
6. That's it! Save your template or publish the post. 

Just hit the text of your choice - Red or Brown or Blue and enjoy the changing environment on your blog. You may change from the default colors (Red, Brown, Blue) to the ones you like, by just altering the color codes (highlighted in blue) mentioned in step 2. In fact, you can alter between your background images. To do so, just replace "BG IMAGE URL" with the URL of your background image.

I hope, I kept the logic as well as the post simple. The above code was tested to work fine on all major browsers including, but not limited to, IE, FF, Opera, Chrome and Safari. If you find any difficulties in installing the above effect, then leave a comment or ping me on gtalk. I'll help you out! Do share your opinions about the article via comments:)

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Tutorials, jQuery
sumera said on August 6, 2011 at 12:50 AM :

thanks for sharing :D was searching for this since long

REPLY
Mukund said on August 6, 2011 at 1:19 AM :

@sumera: I'm glad that your long term search has come to an end today! Lol:) Thanks for the comment buddy!

REPLY
Haz Issac said on August 6, 2011 at 2:04 AM :

i will try this.. its is have a text resizer hacks for blogspot? to add every blog post at a tittle post..?

REPLY
Mukund said on August 6, 2011 at 12:01 PM :

@Haz Issac: I'm not able to understand your English! Just tell me clearly what you want and I'll let you know if it is possible on blogger:)

REPLY
Analyst said on August 6, 2011 at 11:46 PM :

I must say that it is a great tweak which has been explained in an easy to understand language. You are doing great job.

REPLY
Anonymous

You got good points there, so I always love your site, it looks like you are an expert in this field. keep up the fantastic work, My friend recommends your blog.

My blog:
rachat credit pret www.rachatdecredit.net

REPLY
Mukund said on August 7, 2011 at 10:21 AM :

@Analyst: Ah! Yes! Thanks for the comment buddy! Hope you enjoy the upcoming articles as well!

REPLY
Mukund said on August 7, 2011 at 10:22 AM :

@Anonymous: Yup! Thanks for the comment and your friend as well who recommends my blog:)

REPLY
chris said on August 16, 2011 at 7:37 AM :

i really appriciate.god bless

REPLY
Mukund said on August 16, 2011 at 11:01 AM :

@chris: Well, thanks for the comment buddy! I hope you enjoy the other articles on my blog as well!

REPLY
benooi said on August 29, 2011 at 8:09 PM :

NICE! Thanks alot

REPLY
Mukund said on August 29, 2011 at 11:10 PM :

@benooi: Yup! Thanks for the comment buddy!

REPLY
kk said on October 5, 2011 at 12:26 PM :

changing backgrounds is exactly what i needed, but what is the code for changing 4 to 5 backgrounds

REPLY
Mukund said on October 7, 2011 at 12:07 AM :

@kk: You just have to extend the codes! If you don't know, how to do that, just hit me via gmail and I'll help you out!

REPLY
Ricardo said on November 8, 2011 at 6:32 PM :

Seriously, I'm addicted in your tutorials xD.
A while ago I asked you how to add a button to my blog, but I managed to install it after some failed atempts, so I never reached you via e-mail about that. thanks anyway.
I've got a doubt... in fact two about this effect. First off all, Does it only accept 3 choices of Bg change, or can I manually add more and name them "4", "5"... etc.
Second one, let's imagine I want to expand the possibility of changing BG to the possibility of changing between 2/3 or more color schemes, Is it possible?
I will either way use it on my blog, but this questions popped my mind. thanks, and congrats for you amazing tutorials ;)

REPLY
Mukund said on November 27, 2011 at 11:53 PM :

@Ricardo: Well, sorry for the delayed response! Anyway, it is possible to add more than 3 colors! I'm not clear with the second question! Nevertheless, install the above effect and let me know if you like it!

REPLY
Anonymous

Is it possible to use several photos, instead of colors/

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]