Cara Membuat Animasi Kupu Kupu dan Kelelawar Terbang di Halaman Blog
KerjaTerus.com~ Blog bisa di ibaratkan sebuah rumah, jika rumah itu indah, nyaman, ada tamannya yang luas, banyak burung dan kupu kupu yang terbang tentunya rumah itu akan kelihatan asri dan nyaman, dan yang pasti teman tetangga kita jadi betah jika sedang main kerumah kita. Begitu pula dengan blog, jika blog kita bagus, indah dan di dalam nya terdapat Kupu-kupu dan kelelawar sepertinya akan terlihat natural serasa di taman bunga. dan jika pengunjung blog datang mereka akan merasa betah dan senang untuk berkunjung lagi..
Sebagai contoh lihatlah kupu-kupu terbang di blog ini
Baiklah, langsung aja ke pokok permasalahan...
disini terdapat 2 script kode yaitu script kode Kupu-kupu Terbang dan script kode Kelelawar terbang,,
Pilih salah satu script kode dibawah ini
Script kode Untuk Kelelawar Terbang :
<script
src="http://kikiefendbat.googlecode.com/files/www.kikiyo.co.cc.kelelawar.js"
type="text/javascript"></script>
Script kode Untuk Kupu - Kupu Terbang :
<script src="http://kikiefendbat.googlecode.com/files/www.kikiyo.co.cc.kupu2.js" type="text/javascript"></script>
Langkah - langkahnya :
1.Masuk Ke Akun Blogger Anda
2.Klik Tata letak atau Rancangan
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode diatas didalam HTML/JavaScript
6.Klik Simpan
Jika anda ingin menampilkan kode javascript sendiri agar terlihat seperti profesional dengan tampilan kode javascript milik anda,
Silahkan anda copy paste kode di bawah ini pastekan di notepad lalu save dengan nama misalnya Kelelawar.js lalu anda simpan di hosting penyimpanan seperti code.google.com
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES
//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!
var floatimages=new Array();
floatimages[0]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq_bFPf0938R5VljNTCG2trwgG4dTl34A-3dI-Z5lTILvzg6YvoEaZ3GXsLobGRX4F2XqfAhAzn1_I7MLHpg1shkTyOSSM8T5DjlqV4j81q3MFl8k8zTs7FwUz51zp4rN_LFWKNejHpT1-/s128/butterfly2.gif';
floatimages[1]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq_bFPf0938R5VljNTCG2trwgG4dTl34A-3dI-Z5lTILvzg6YvoEaZ3GXsLobGRX4F2XqfAhAzn1_I7MLHpg1shkTyOSSM8T5DjlqV4j81q3MFl8k8zTs7FwUz51zp4rN_LFWKNejHpT1-/s128/butterfly2.gif';
//*********DO NOT EDIT BELOW***********
var
NS4 = (navigator.appName.indexOf("Netscape")>=0 &&
parseFloat(navigator.appVersion) >= 4 &&
parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer
name="pic'+i+'" visibility="hide" width="10" height="10"><a
href="javascript:hidebutterfly()">' : '<div id="pic'+i+'"
style="position:absolute; visibility:hidden;width:10px;
height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);
function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}
function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}
function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}
function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}
function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}
function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}
function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}
function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}
function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}
function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}
function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}
function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}
if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}
mantab tutorialnya
ReplyDelete