Background Animations On Blogger Using Jquery

Recently, I came across a website in which the header had an animated background - dynamically moving image. I thought, why not try to achieve a similar effect on blogger. I worked out the codes, to be honest, it was quite simple. So, in this article, I've explained the basic idea behind animating backgrounds using jquery. If you intend to apply the same effect on your header, then reach us via the services tab.

BACKGROUND ANIMATION ON BLOGGER - LIVE DEMO

I suggest you to take a look at the demo, by hitting the link above, before we dive into the tutorial. I've personally test the above effect on all major browsers that include, but not limited to, IE, FF, Chrome, Safari and Opera which simply ensures a perfect browser compatible view. So, what you waiting for? Just follow the instructions below and get them installed on your blog.

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. Just replace the above code with the following code present in the text document - SCRIPT AND CSS FOR BACKGROUND ANIMATION. The code in the text document contains the CSS and JavaScript required to run the animation. If you already have the main jquery file running on your blog, then remove the line which contains it from the text document. To remove it, just delete the following line from the text document.

3. Next, place the following HTML tags anywhere on your template - possibly before/above <div id='content-wrapper'> (or) <div class='columns fauxcolumns'> (or) you may use them in the blogger post editor, just like I did in the demo link.

4. That's it! Save your template and your done!

I hope the tutorial was pretty simple to understand and work on. If you find any difficulties in getting the animation working, then leave a comment below and get it solved. As usual, share your opinions via comments below.

Enjoyed the article?

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!

What's Next?

Other Recommended Posts

jaypei said on September 9, 2011 at 11:34 PM :

can we customize the background to the kind of design we want?

Mukund said on September 10, 2011 at 1:42 AM :

@jaypei: Yes! Why not! You can! Just change the image background and you'll see a complete change with the animation.

Ashiq Hassan said on September 10, 2011 at 1:13 PM :

Awesome Design..
Thanks Mukund

Basant said on September 10, 2011 at 1:26 PM :

Mukund: That was cool! Being a blogger user I liked it.

Mukund said on September 10, 2011 at 2:19 PM :

@Ashiq Hassan: Yup! Thanks for the comment Ashiq! Hope you enjoy the upcoming design articles as well:)

Mukund said on September 10, 2011 at 2:20 PM :

@Basant: Yup! You'll find many more tricks here for Blogger! So, stay tuned Basant:)

Beben Koben said on September 10, 2011 at 5:04 PM :

nice one animations ;)

Mukund said on September 10, 2011 at 11:00 PM :

@Beben Koben: Thanks Beben! Seen a lot of comments from you:) Keep them coming:)

Gold carat tester said on October 21, 2011 at 11:46 AM :

Thanks for sharing it with us. It's looking awesome. my all friends and lot of visitors like it.

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

POST YOUR COMMENT