How to make Blog's template background animated?

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:#fefefeurl(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.

                        

                

       

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.

Readmore: Blogger Beginners: How to Host Image By using Blogger Static Page?

Readmore: How To Combine CSS And JavaScript File in Google Drive to Speed up the Blog loading Time

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.