Add Moving Clouds In Background Blogger Using Jquery

By Pravin Purohit   Posted at  07:54   Blogger 18 comments

Add Moving Clouds in Background Blogger using jqueryHave a Look at This Image. Its wow? Isn't it? So this is a simple css and jquery trick which makes the background image move. if you'll see the Image is constant. it isnt a gif. its the jquery which make the background move





Did Amazed with pic? Check


Steps to Add this to your own Blog / site.

So Its Very Easy to Add this to you blog


  • Visit Blogger > Dropdown menu > Template > Edit HTML
  • Now Press Ctrl  + f and search for body{ [this is actually starting of your blogs body]
  • And Replace the body{ with the code below
background:#c1deee url(http://i.imgur.com/JD8mWs7.png) repeat-x scroll top left;
  • Now Your Background Will be seen :) But we need to move the Clouds . ie background image
  • So Add the following code Above
</head>

<script src=’http://ajax.googleapis.com/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>

  • Yeah! Hi five your blog now have a animnated background. just remove code highlighted above if you have already included jquery and change speed as you Wish
Leave a Comment Below if any problem and thanks to the Developer :)

    About the Author

    Pravin Purohit is authour at hackmadeeasy. he is a web developer . he loves to develope new things . he is master at creating android apps and is a famouse internet marketer too. his new blog its http://TechTreat.in .
    View all posts by: Pravin Purohit

    18 comments:

    1. Wonderfull. Ya made my day :)

      ReplyDelete
    2. how to make it fast?

      ReplyDelete
    3. This comment has been removed by a blog administrator.

      ReplyDelete
    4. Is it possible to make it to 2 separate moving backgrounds? Say 2 different backgrounds moving at different speed? Please advise... Thank a lot!

      ReplyDelete
      Replies
      1. Sorry But We Cant Add Two Background Images To Blog :)

        Delete
    5. This comment has been removed by the author.

      ReplyDelete
    6. Great
      way2hacking.com

      ReplyDelete
    7. Hello Pravin
      I love this particular hack, but I can not find body{
      in the template.
      I am using SIMPLE Template in the new Designer.
      Any ideas Please?

      Thank you

      ReplyDelete

    Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
    Note:
    1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
    2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
    3. Please "Do Not Add Links" to the body of your comment as they will not be published.
    4. Only "English" comments shall be approved.
    5. If you have a problem check first the comments, maybe you will find the solution there.

    Back to top ↑
    Connect with Us

      Follow our updates

      Total Pageviews

    Contact us

    Name

    Email *

    Message *

    Like us

    Recent Comments

    © 2011-2013 Hack Made Easy. All rights reserved.