Membuat animasi Awan Di Blogspot,itu pembahasan saya kali ini,animasi awan ini saya rasa cukup menarik untuk di coba,membuat tampilan blog sobat mungkin sedikit menarik dengan adanya awan beterbangan di halaman depan membuat kita seakan betah melihatnya.Sobat penasarn nih silahkan lihat dulu demonya.
Gimana tertarik bukan......,buat sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini
1. Pastikan posisi sobat dalam keadaan login.
2. Pilih menu Template > Edit HTML
3. Backup dulu untuk menjaga kesalahan,kemudian centang Expand Widget Templates
4. Cari Kode ]]></b:skin> gunakan CTRL+F untuk memudahan pencarian
5. Copy Kode di bawah dan pastekan di atas kode ]]></b:skin>
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyG1u9dpQqvUBe3Nz9SKIr1j075_XkPc8Uym3kq1rh7Lm64j7rAHxpZ6thQG07zpD0Bp1bC150jpqggRPB57ucJzFk9CN-p1PMyn3Ruz7Ddf8r-YrEgH9774AY7_2GNlRQOOPPpXt2Zho/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/AVvXsEjtbc3gexKucdTWpss-PXLl2Wk6EmzbykBvkSa6fbu9wWU5QmrdAe2g_2GqcxWiCb34Vdl08U6Czu_LkJZU331IqLQnE6lgGZ673HFxAKZFFUiRT6YHKDJp3Th_lEvEEpv4tO3QI2SkuuQ/s1600/cloud3.png) repeat-x 0 0;
height: 46px;
position: absolute;
width: 100%;
z-index: 3;
}
6. Kemudian cari lagi kode </head> dan letakan kode di bawah tepat di atas kode </head>
<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>
7. Dan Terakhir cari kode <body> kemudian letakan kode di bawah tepat di bawah kode <body>
<div id='cover-cloud'>
<div id='cloud'/>
<div id='cloud2'/>
<div id='cloud3'/>
</div>
Untuk mendaptkan hasil yang optimal silahkan sobat korek kembali scriptnya sesuai selera,sambil nunggu adzan,,hehehehhe.
Setelah semuanya beres kemudian save dan lihat hasilnya.
Beres sudah tutorial kali ini tentang cara Membuat Animasi Awan Di Blogspotsemoga artikel ini sedikit bermanpaat buat semuanya.
Tidak ada komentar:
Posting Komentar