Home » Blogger Tutorials, Tricks and Hacks » Blogger Beginners » Add An Animated Cloud Background In Your Blog

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add An Animated Cloud Background In Your Blog

Add An Animated Cloud Background In Your Blog

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


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/jquery.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!

Liked It ? Please Share

Related Tricks & Tutorials


6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. surinder says:

    awesome yaar 🙂
    feel free to visit my page

  2. Hi, thanks for mentioning my name in your blog post, but the thing i didnt like is the hot linked gif image from my website, please remove the hot linked gif image and upload the image to your own server. I hope you will follow my request.

  3. AKbalthom says:

    I can’t find body{? 🙁

  4. onlinejobs says:

    its really nice in wp template is in php or html and i modified one of blog its looks great

  5. Excellent inclusion of tips and add-ons that will truly spice up a page and bring more visitors back for more! Check out, share and consider donating any amount in support of my writing blog at http://gmartiro.blogspot.com

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here