How to make Blog's template background animated?
animation on blogger template background
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.
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.
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.
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.
4 comments