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.
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 Blogspot semoga artikel ini sedikit bermanpaat buat semuanya.
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/AVvXsEgY-ifcwVgA8YEExB28OSwuDMsbI0HCW9Z2DpGtN5JPrYK3i8l8z2ULzBjJEUWf-YnlTeyhXRY2-J7WtNlhXW7n6G_p-ZdRgcfIG3wGakqcLpOsqm8Mz8xecDyxd9jCN1p7q8B02H-Hb3w/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/AVvXsEgqTYG3V5GF0tkw03XHNzPaqXi_13gQ9S7eDuAD5Q9EcMu_qUmZHCELG5agPZyNwoOOST0hyKt8d3GGTlr05KCTH2anmKvL3u2xL1Yof0eyP3F8oTYMOmA7M1LT3mYAFlBWcu6CUy1EArs/s1600/cloud3.png) repeat-x 0 0;
height: 46px;
position: absolute;
width: 100%;
z-index: 3;
}
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/AVvXsEgY-ifcwVgA8YEExB28OSwuDMsbI0HCW9Z2DpGtN5JPrYK3i8l8z2ULzBjJEUWf-YnlTeyhXRY2-J7WtNlhXW7n6G_p-ZdRgcfIG3wGakqcLpOsqm8Mz8xecDyxd9jCN1p7q8B02H-Hb3w/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/AVvXsEgqTYG3V5GF0tkw03XHNzPaqXi_13gQ9S7eDuAD5Q9EcMu_qUmZHCELG5agPZyNwoOOST0hyKt8d3GGTlr05KCTH2anmKvL3u2xL1Yof0eyP3F8oTYMOmA7M1LT3mYAFlBWcu6CUy1EArs/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>
Setelah semuanya beres kemudian save dan lihat hasilnya.
Beres sudah tutorial kali ini tentang cara Membuat Animasi Awan Di Blogspot semoga artikel ini sedikit bermanpaat buat semuanya.
Komentar
Posting Komentar