Blogger haraketli Bulutlar yapımı

Merhaba arkadaşlar bugun bir sitedeki gördüğüm temada üst kısımda  haraket eden bulutlar gördüm ve çok güzel bir görüntü sağlıyordu tema adresinide verelim Burdaki temanın Demosudur.Burdaki Adrestende isterseniz Temayı indirebilirsiniz.
Evet arkadaşlar butarz bulut efektini belki sizlerde kendi sitenizde uygulamayı istersiniz diye düşündüm güzel bit arka plan ekliyip birde burdaki efekti eklediğinizde Çok güzel Oluyuor ben bu kodları bu temadan çıkartım hemen paylaşalım dedik :) Sırasıyla kodlarımıza geçelim...

Demosunu Burdaki adresten Görebilirsiniz.

öncelikle şablonumuzu genişletip bu kodu bulup ]]></b:skin> aşağıdaki css kodunu üstüne ekliyoruz..

#cover-cloud{height:200px;left:0;min-width:1074px;position:absolute;width:100%;z-index:0}#cloud{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRjE_-pUB9LoYxoO7gTFm3qYXaU7GdHbivEYGZRm7gp60s3wX9du7fL4htzZVveZpk9Z9LvqOaK2a0lKkd6GeqFrpz30d4pFznbTk3fbM7yqfoH5JflluI6LMgrVjQ6pFvXnuq6mABQw/s1600/cloud1.png) repeat-x 0 0;height:188px;position:absolute;width:100%;z-index:1}#cloud2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRlkoJL9sWhgpveHzegTJxDkMlMb2Zch9On9dGLw_nNEYB8c9J2dH2DCZ4Z9l-hGjXlRl4FgVJ_H4_3HhTb1ssm47MzJG9c8rjn7lcbb5qaWKIj-Ua2JW-n7oZZjHVpHBKn7ToWCK4-lM/s1600/cloud2.png) repeat-x 0 0;height:125px;position:absolute;width:100%;z-index:2}#cloud3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZFWnOkuXRr8u8ZrZvVhR78WMy8PRhKg-9RCaecz1ZN7E_qNdGKR72q023MgDSMoRrqm8TnkiUsRP2Ht9wMfKSjzk1mU9PVMb0UGS-ntuDX3l1x73SJvhkmVz1GRZro4Bonq9JI_qhWiE/s1600/cloud3.png) repeat-x 0 0;height:46px;position:absolute;width:100%;z-index:3}

Sonrasında </head> kodunu bulup aşaıdaki kdları üstüne eklemeniz.

<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>

en son olarak aşağıdaki kodlarıda <body> kodunun hemen altına eklemeniz.

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

Not: Sitenizde daha önceden bu kod eklenmişşe

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
aşağıdaki head kodunda verdiğim koddaki bu kodu çıkarmanızı tavsiye ederim çünki aynı kod varsa kodlar çalışmıyo biliyor bu konudada bilgilendirelim dedim