How to make Blog's template background animated?

animation on blogger template background

4
data:blog.title
wallpaper

Everybody wants to make their blog attractive and for this reason they try to add unique widget. There are several wallpaper or pattern available over the net that you can use it to make your blog presentation attractive. But if you use any jpeg or png format background then it would be static. Formerly many blogger used GIF format image to make blog background animated. But this is often hard to find beautiful and animated GIF background. So today I will share  with you a trick that you can make your JPEG or PNG format image or background animated. And this tweak will make your blog more attractive.  If you can add GIF animated image then it will add an extra spice on your blog.

So let's go to the tutorial that how we can add super cool animated background effect to Blogger/blogspot blogs.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Template -> Edit HTML

Step 3 Now find body{ by pressing Ctrl+F and this is the starting for body styling, now replace the 

background with the below code. 
body{background:#fefefe url(Paste Any Image URL Here) repeat scroll top left;margin:0;padding:0;color:#000000;font:x-small Georgia Serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}

Customization

  • For changing background color please change the color code #fefefe  by using our color picker.
Step 4 Now Copy and Save any image from below or you can apply this tweak on your existing template background.

disco      animation                  heart

dot wallpaper    star            blue sky

star       blazing star


Step 5 After saving image upload it into your own server for future safety. You can Host your blog image in Google Blogger or Google Drive or in Dropbox.



Step 6 Assume that you have hosted your image background and we just need to give it some nice 

animated motion. so find the </head> tag by pressing Ctrl+F. And copy the below code and Paste 

it above </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
  //<![CDATA[
function moveBg(){pos++;$("body").css({backgroundPosition:pos*1+"px 0px"})}var intval=null;var pos=0;$(document).ready(function(){intval=window.setInterval(moveBg,70)})
//]]>
</script>

JavaScript code is optional. If your template has any advanced Jquery file such as 1.7 or 1.8 version then you don't have to add the below code.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Step 7 Now simply hit the Save template button. and visit your blog to see the effect.

I hope you would like this widget which is able to add animation into any kinds of background image. but my suggestion is to choose light background image which is good for view. Thanks.

How to make Blog's template background animated?
4 Stars stars - "How to make Blog's template background animated?" Everybody wants to make their blog attractive and for this reason they try to add unique widge...

Post a Comment

amazing widget & tips buddy , tanx 4 share

You are most welcome Aslam...

please can u give templete of our blog

Maybe in future..but not now. Thanks

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *