Add An Animated Cloud Background In Your Blog

Here’s a simple yet nice aesthetic design that some of you might want to put in your blog: it’s an animated background image of passing clouds. It’s actually originally created for WordPress blog but thanks to the effort of Blogger user Harihara Kumar, with a little tweaking done to the code, the rest of us can now enjoy having the same in our own blogging platform.
Follow the quick and easy-to-follow instructions below:

• Starting from your Blogger dashboard, go to Template and then click on Edit HTML.

• By pressing Ctrl+F, search for body{ in your template’s code and replace the background property with the following code below:

background:#c1deee url

(http://hidedoor.com/servlet/redirect.srv/sruj/scxpfacrhvknygclmf/s4jo/p2/-

bH9AzBUEiTc/UQW6yyxXtUI/AAAAAAAAAwI/8JRy5jzq4Ps/s912/JD8mWs7.png) repeat-x scroll top 

left;     

TIP: Better to save and upload the image into your own server or any image hosting service that you may happen to have an account with, so as to avoid the risk of encountering any 404 error.

• Next, using Ctrl+F again, search for the </head> tag then copy/paste the code below:

<script 

src='http://hidedoor.com/servlet/redirect.srv/sruj/sbsamrzvefy/srvfx/p1/ajax/libs/jquery/1/j

query.min.js' type='text/javascript'/>

<script charset='utf-8' type='text/javascript'>var scrollSpeed=70;var step=1;var 

current=0;var imageWidth=2247;var headerWidth=800;var restartPosition=-(imageWidth - 

headerWidth);function scrollBg(){current -=step;if (current==restartPosition){current=0;}

$(&#39;body&#39;).css(&quot;background-position&quot;,current+&quot;px 

0&quot;);}var init=setInterval(&quot;scrollBg()&quot;, scrollSpeed)

</script>     

NOTE: If you already happen to have the first line of code (one highlighted in red) in your template then you can just exclude it and just copy the one below it instead.

• Save your template and you’re done! View your blog and see if you got it right. Enjoy!