percantik halaman blog dengan kupu kupu berterbangan kemana2

Halo teman teman yang budiman.. kali ini saya masih membahas tentang tutorial javascript, knapa saya bahas tutorial javascript terus terusan akhir akhir ini yah..? hehehe... saya juga heran knapa.. tapi yang pasti biar kolom tutorial javascript yang ada di halaman daftar isi blog menjadi lebih penuh, karena saat ini kelihatan berat sebelah alias banyak postingan tutorial HTML dan menjadi ga seimbang antara kolom tutorial HTML dengan kolom tutorial JAVASCRIPT.
Oke dech... ga banyak kata lagi langsung aja saya akan mebahas tutorial javascipt yang kali ini saya akan ngasih bocoran gimana cara mempercantik halaman blog dengan mengasih kupu kupu berterbangan kemana mana pada halaman blog kita, seperti ini nih contohnya nya.. klik disini , atau yang ini juga
Seperti biasa, disini saya akan mengasih anda dua cara.. yaitu cara mentah dan mateng.. hehehe.. kayak makanan aja yah.. oke.. sekarang akan saya kasih cara mateng nya dulu, yaitu anda tinggal memakai scriptnya dan memasukkan kedalam halaman blog anda...
Masukkan script dibawah ini kedalam halaman edit html blog anda dan tepatnya taruh diatas kode </body> :

<script src="http://h1.ripway.com/ekhan/kupu-kupu.js"></script>

kemudian SAVE / SIMPAN template anda (lihat hasilnya), jika masih bingung dengan cara di atas atau alasan lain seperti ribet/kelamaan.. ok.. akan saya kasih jalan mudah dan prkatisnya.. Yaitu, anda menuju kehalaman LAYOUT blog anda, kemudian tambahkan gadget baru ( ADD A GADGET ) dan pilih lagi pilihan HTML/JAVASCRIPT dan masukkan script tadi ( *yang di atas itu loh* ) kedalamnya dan tekan tombol SAVE / SIMPAN .. oke dech.. lihat hasilnya sekarang juga... ( kalo berhasil cuap cuap disini juga boleh.. biar PUASSSS...!!! hehehe )

Kemudian cara yang kedua, yaitu cara mentahnya. Mengapa saya katakan sbg cara mentah.. karena disini anda tidak bisa langsung memakai scriptnya kedalam blog anda.. anda harus mengupload script dibawah ini ke web file hosting pilihan anda, ex: www.ripway.com , www.googlepages.com , www.geocities.com , dll. ni dia scriptnya..

/*
Flying Bats script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.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]='http://h1.ripway.com/ekhan/master-kupu.gif';
floatimages[1]='http://h1.ripway.com/ekhan/master-kupu.gif';
floatimages[2]='http://h1.ripway.com/ekhan/master-kupu.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(); }
}

copy seluruh script diats kemudian taruh dlam notepad / sejenisnya dan save / simpan dalam format ( .js ) tanpa tanda kurung, contoh : kupu.js .
Setelah anda save file js di atas lalu upload ke web file hosting pilihan anda.. dan setelah anda upload.. kemudian anda buat script pemanggil file js tersebut, seperti ini contihnya :

<script src="http://web-file-hosting-anda.com/kupu.js"></script>

kemudian.. kayak cara yang pertama tadi.. anda tinggal memasukkan script diatas ini kedalam halaman blog anda, [ klik disini untuk melihat cara yang diatas tadi ]

oke dech... selesai dan silahkan lihat hasilnya....
criiiing... kupu kupu berterbangan di halaman blog anda...

Oiya.. script diatas juga bisa anda pakai / masukkan kedalam halaman profile FRIENDSTER anda, yaitu caranya taruh scrip di bawah ini kedalam edit " ABOUT ME atau I WANT TO MEET "

<script src="http://h1.ripway.com/ekhan/kupu-kupu.js"></script>

Oke... segitu aja dulu yah... dan masih banyak lagi tutorial javascript lainnya yang lebih keren dan menarik... kalo ingin rekues tutorial javascript atau sekedar cuap cuap melepas kepuasan atas keberhasilan anda memasang script ini silahkan isi dikotak komentar dibawah ini yah...
Selamat sukses berblogging...

Posted by ayiek

Tweet