Beautiful Animated Clouds Background for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Animated Clouds Background for Blogger
The layout of a blog plays very important role in its success. If you search in Google, you could find many widgets for your blog including professional as well as fancy. So today, I wanna share something about how to add animated clouds background to your blog. If you make an animated effect, it might slower your blog while scrolling. But this cloud animated widgets is totally different from others, never affect your loading speed, because its ragged from a paid template.

Interested? Well, but before we leap into this tutorial, I wanna show you how this animated clouds background looks like. So Ive add already applied it to my demo blog. Click on the Free Live Demo image provided below and comprehend how this animation to be seen in your blog.

animated clouds background demo

 Add this Animated Clouds Background to your blog
I think, for newbies itll be a little bit complicated, because youve to deal with not only CSS and HTML but with jQuery too. And if youre using WordPress, able to follow the same method in your own manner. Ive not used WordPress yet, so Im not able to give much explanation about adding this cloud background in WordPress.

  • Go to Blogger Dashboard » Template
  • Backup your blogger Template before making any changes
  • Click on Edit HTML
  • Check Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right Above/Before ]]></b:skin> (use Ctrl+F to find the code).

#cover-cloud {
    height: 200px;
    left: 0;
    min-width: 1074px;
    position: absolute;
    width: 100%;
    z-index: 0;
}
#cloud {
    background: url(http://2.bp.blogspot.com/-pIdaj5t_YMg/T4asjeHwrJI/AAAAAAAADPo/1jFK0WRW4Z0/s1600/cloud1.png) repeat-x 0 0;
    height: 188px;
    position: absolute;
    width: 100%;
    z-index: 1;
}
#cloud2 {
    background: url(http://4.bp.blogspot.com/-1LiwOdGfsag/T4afsRPasQI/AAAAAAAADPI/rP6G5TP0ky8/s1600/cloud2.png) repeat-x 0 0;
    height: 125px;
    position: absolute;
    width: 100%;
    z-index: 2;
}
#cloud3 {
    background: url(http://3.bp.blogspot.com/-D1UZFZTfMMo/T4afst6IauI/AAAAAAAADPU/zzTOtV0P-40/s1600/cloud3.png) repeat-x 0 0;
    height: 46px;
    position: absolute;
    width: 100%;
    z-index: 3;
}

Please note: Therere 3 clouds images hosted in above CSS code [line no: 10,17 & 24]. So, ensure to upload these images in your own server. If we could somehow delete these images in future you mayve a backup. Also you can change these images with your own desired images.

Press Ctrl+F again and search for </head> then copy & paste the below code just Above/Before </head> tag. Please make sure to place the code provided below as a pain text in your blogger template. Its better.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
(function(e) {
    e._spritely={animate: function(t){var n=e(t.el);
    var r=n.attr("id");if(!e._spritely.instances){e._spritely.instances={
}}
if(!e._spritely.instances[r]) {
    e._spritely.instances[r]={current_frame: -1;
}}
var i=e._spritely.instances[r];if(t.type=="sprite") {
    var s;var o=function(n){var i=t.width,o=t.height;if(!s){s=[];total=0;for(var u=0;u<t.no_of_frames;u++){s[s.length]=0-total;total+=i;
}}
if(e._spritely.instances[r]["current_frame"]>=s.length-1) {
    e._spritely.instances[r]["current_frame"]=0;
}
else {
    e._spritely.instances[r]["current_frame"]=e._spritely.instances[r]["current_frame"]+1;
}
n.css("background-position",s[e._spritely.instances[r]["current_frame"]]+"px 0");if(t.bounce&&t.bounce[0]>0&&t.bounce[1]>0) {
    var a=t.bounce[0];var f=t.bounce[1];var l=t.bounce[2];n.animate({top: "+="+a+"px",left:"-="+f+"px";
},l).animate( {
    top: "-="+a+"px",left:"+="+f+"px";
},l);
}};
o(n);
}
else if(t.type=="pan") {
if(t.dir=="left"){e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]-(t.speed||1)||0;
}
else {
e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]+(t.speed||1)||0;
}
if(e.browser.msie) {
var u=e(n).css("background-position-y")||"0";e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u);
}
else {
var u=(e(n).css("background-position").split(" ")||" ")[1];e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u);
}}},randomIntBetween:function(e,t) {
return parseInt(rand_no=Math.floor((t-(e-1))*Math.random())+e);
}};
e.fn.extend( {
spritely: function(t){var t=e.extend({type:"sprite",do_once:false,width:null,height:null,fps:12,no_of_frames:2;
},t|| {
});
t.el=this;t.width=t.width||e(this).width()||100;t.height=t.height||e(this).height()||100;var n=function() {
return parseInt(1e3/t.fps);
};
if(!t.do_once) {
window.setInterval(function(){e._spritely.animate(t);
},n(t.fps));
}
else {
e._spritely.animate(t);
}
return this;
},sprite:function(t) {
var t=e.extend({type: "sprite",bounce:[0,0,1e3];
},t|| {
});
return e(this).spritely(t);
},pan:function(t) {
var t=e.extend({type: "pan",dir:"left",continuous:true,speed:1;
},t|| {
});
return e(this).spritely(t);
},flyToTap:function(t) {
var t=e.extend({el_to_move: null,type:"moveToTap",ms:1e3,do_once:true;
},t|| {
});
if(t.el_to_move) {
e(t.el_to_move).active();
}
if(e._spritely.activeSprite) {
if(window.Touch){e(this)[0].ontouchstart=function(t){var n=e._spritely.activeSprite;var r=t.touches[0];var i=r.pageY-n.height()/2;var s=r.pageX-n.width()/2;n.animate({top: i+"px",left:s+"px";
},1e3);
}}
else {
e(this).click(function(t){var n=e._spritely.activeSprite;e(n).stop(true);var r=n.width();var i=n.height();var s=t.pageX-r/2;var o=t.pageY-i/2;n.animate({top: o+"px",left:s+"px";
},1e3);
})}}
return this;
},active:function() {
e._spritely.activeSprite=this;return this;
},activeOnClick:function() {
var t=e(this);if(window.Touch){t[0].ontouchstart=function(n){e._spritely.activeSprite=t;
}}
else {
t.click(function(n){e._spritely.activeSprite=t;
})}
return this;
},spRandom:function(t) {
var t=e.extend({top: 50,left:50,right:290,bottom:320,speed:4e3,pause:0;
},t|| {
});
var n=e(this).attr("id");var r=e._spritely.randomIntBetween;var i=r(t.top,t.bottom);var s=r(t.left,t.right);e("#"+n).animate( {
top: i+"px",left:s+"px";
},t.speed);window.setTimeout(function() {
e("#"+n).spRandom(t);
},t.speed+t.pause);return this;
},makeAbsolute:function() {
return this.each(function(){var t=e(this);var n=t.position();t.css({position: "absolute",marginLeft:0,marginTop:0,top:n.top,left:n.left;
}).remove().appendTo("body");
})}})})(jQuery);try {
document.execCommand("BackgroundImageCache",false,true);
}
catch(err) {
}//]]></script>
<script type='text/javascript'>(function($) {
$(document).ready(function(){$('#cloud').pan({fps: 30, speed: 1, dir: 'right';
});$('#cloud2').pan( {
fps: 30, speed: 2, dir: 'right';
});$('#cloud3').pan( {
fps: 30, speed: 0.5, dir: 'right';
});});})(jQuery);</script>

Customization: You dont have to change anything in the above jQuery code. The thing that you can customize is the speed of animated clouds. So youll be able to speed up/down your clouds as you yearn for by customizing highlighted lines [speed: 1 from line no: 109, speed: 2 from line no: 111 & speed: 0.5 from line no: 113].

Now in your find bar search for <body> and if youre using default blogger template, simply search for <body and copy & paste as plain text the below code right After/Below the <body> tag. Itll display clouds on the top as you see in LS demo blog.

<div id='cover-cloud'>
<div id='cloud'/>
<div id='cloud2'/>
<div id='cloud3'/>
</div>

Warning!: While saving your blogger template, youll get an attribute error message. So after applying the above code, slightly add a > attribute to your body tag. Unless you know how to fix the error message, see the image screenshot  http://goo.gl/Njme3

Also see: Metro Style Subscription Widget for Blogger

Preview your blogger template and if everything is Okay, slightly click on Save template and youre done! And if youre a dedicated WordPress user let me know how it works via comment. Also kindly contact us if youre facing any problem while dealing with CSS or jQuery. Thanks!