Membuat Kupu-kupu Terbang di blog

Ingin tahu gimana caranya membuat kupu kupu terbang di blog. Kayak di blog ini. simaklah tutorial saya berikut ini yaa....

Caranya cukup mudah anda cukup memasukkan java sript untuk memunculkan kupu-kupu indah di blog anda. Baiklah langsung saja akan saya tuliskan cara membuatnya :

1. Login ke Blogger

2. Masuk ke Tata Letak

3. Trus Edit HTML

4. Trus copy-paste kode java script di bawah ini tepat
sebelum kode </head> untuk mempermudah pencarian tekan ctrl+f.


<script type='text/javascript'>
//<![CDATA[
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://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';
floatimages[1]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.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(); }
}


//]]>
</script>


5. Save...buka blog anda dan refresh browser....sekarang ada sesosok binatang yang indah menawan di blog anda....

Apabila anda belum berhasil membuatnya gunakan cara kedua di bawah ini:
1. Login ke Blogger
2. Klik Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Masukkan kode Java script seperti di bawah ini.

<script src="http://sites.google.com/site/javascriptnew/java-script/butterfly.js" type="text/javascript">
6. Save.
Kalo anda suka dengan tutorial ini jangan lupa pasang banner ku yaa...hehehe

73 komentar:

  1. wah, mantap juga sob... boleh dicoba nich...

    BalasHapus
  2. keren sob kupu2 ngikutian terus..keep blogging

    BalasHapus
  3. yupz thx ea maz, eh tapi kayakna misal akuw edit scripnya boleh ndak???? thx ea

    BalasHapus
  4. postingan bagus..tapi..jangan bikin postingan kupu-kupu malam terbang ya..kasihan mereka cari rizki yang haram.

    BalasHapus
  5. makasih ya artikel na
    aq dah lma nyari artikel ini
    nice articel

    BalasHapus
  6. terimakasih ya...tapi di blog ku kok gak bisa ya

    BalasHapus
  7. keren sob... insaya alah q coba... klo mo ganti dengan gambar laen gimana caranya?

    BalasHapus
  8. kalo nggak bisa coba aja aktif-in java script di browser kamu terlebih dahulu....

    BalasHapus
  9. waaahhh....aku suka kupu2, aku mau nyoba ya scriptnya, hehehe udah lama pengen n nyari2, dan akhirnya ketemu juga ^_^ makasih scriptnya ya

    Pasang Iklan Baris

    BalasHapus
  10. kereeeeeeeennnnn..........aku mau copy ya ^_^ makasih

    BalasHapus
  11. wah wah wah berhasil berhasil horeeeee....

    BalasHapus
  12. Pusinggggggggg......
    Kok aku kaga Bisa bisa seh...

    Ooo... Tuhan Ajarin Donk aku

    :d:

    BalasHapus
  13. Adan_Prabu : coba tuz...pantang menyerah pasti bisa deh.

    BalasHapus
  14. Bagus gadgetnya, tapi sayang gak jalan di blog saya Mas... http://multirajut.blogspot.com bantuin donk... thanks

    BalasHapus
  15. PT. Multi Rajut Prima : Sudah q tes n' q coba lagi di blog q yg laen dan berhasil tuch...

    BalasHapus
  16. ma kaasih masss blog ni nyk bgt membantu pemula bagi saya

    BalasHapus
  17. mantap prend,,, makasih bnget ya tuk infonya,,
    sangat berguna bnget bagi ku sebagai pemula bloger,,,

    BalasHapus
  18. klo mau ganti gambarnya gmn kk??

    saia mau ganti laba-laba,gmn caranya??

    TQ..

    BalasHapus
  19. keren kupu2nya... bisa ganti warna kupu2nya nggak mas?

    BalasHapus
  20. Sudah dicoba..jalan kok, mohon ijin pasang ya Thank's

    BalasHapus
  21. bagaimana cara memasang banner n tukeran..? thanks kupu2nya..

    BalasHapus
  22. pusing jugayah? tp thanks sdh dapat ilmu baru bagiku.

    BalasHapus
  23. blogg x bagus truzz yang penting manfaatnya.....
    sukron

    BalasHapus
  24. KERENZ BLOGNYA cuma ku gak bisa yagh nambah icon csmile pada koment

    BalasHapus
  25. alhamdulillah bisa juga yang ini...
    klo mw ganti binatang lain or apa ja selain kupu2 gmn caranya kang??

    truz satu lagi,saya mw pasang banner akang tp ga tw caranya!!ajarin ya!!

    BalasHapus
  26. makasih mas atas ilmu nya. mas aku pgn animasinya buka kupu2. tapi gambar I LoVE You

    BalasHapus
  27. Waduuuch....
    koq d blogQ ga bisa yaa..

    mhon petunjukx... :h:

    BalasHapus
  28. Tutorialnya sudah q tambah sobat...dengan cara 2 yang lebih mudah.

    BalasHapus
  29. alhamdulillah..thanks god...syukrin jazilan akhy...akhir'a Lida bisa juga liat makhluk cantik terbang di my blog..

    BalasHapus
  30. mantap kupu2'a...

    klo yg burung terbang ada gak????

    BalasHapus
  31. bagus bngettttt.....q udah taruk alamt blo u sbgai rsa trimkasihku

    BalasHapus
  32. Terima kasih............walau baru belajar, tapi lumayan u/bisa dimengerti, tapi memang butuh kesabaran.......HmHm..

    BalasHapus
  33. kerrrrreeenddd dahhh artikel'x..
    tp mass low saya mau namil'n yg lain (selain kupu") gmna???

    BalasHapus
  34. sya dah cuba, mantap lar...trimas ya...:h:

    BalasHapus
  35. mkasih ea cma intruksi yg ada diblog maz yg brhsil.. yg laenNa bo'ong..

    BalasHapus
  36. thank's yaa atas tutor'a,,
    bru d'blog ini sy bsa mncoba'a....

    BalasHapus
  37. wahh keren mas makasih yaaaakkk...

    BalasHapus
  38. bagus banget nich info nya boz.. makasih y boz..

    BalasHapus
  39. makasih bozz,,q berhasil,,,tapi kuk g bisa muncul paling depan ya???

    BalasHapus
  40. mendingan nieh script nya, terbangnya kesegala arah
    tapi kog kalo 3 kolom, pas ditengah nyelinap tertutup blognya

    BalasHapus
  41. wah keren, ada ngk kupu2 yang berwarna hijau???

    BalasHapus
  42. Trima kasih mang infonya sangat bermanfaat... oia kupu-kupunya bisa banyak ga mas..?? warna-warni buat di blog saya.. oia,, salam kenal buat semua.. mmuuaacchh...

    BalasHapus
  43. thanks ya utk infonya...klo mau ubah warna n ukuran kupu2nya gmn???

    BalasHapus
  44. >>>Sama Punya Aku Juga Blum Bisa Loh"" Gmn YA ??

    BalasHapus
  45. makasi ya informasinya skrg blog ak uda keren de,,!! hehe :D

    BalasHapus
  46. bagus artikelnya
    ditempatku langsung berhasil
    yang belum bisa
    mungkin kupu-kupunya ketutup sama background entri
    jadinya background entrinya di buat transparan aja

    BalasHapus
  47. kupu-kupunya di belakang layar sob...

    BalasHapus
  48. thanks atas informasinya.........blog q keren bgt

    BalasHapus
  49. untuk blog wordpress berbayar caranya gimana y mas,.,.

    BalasHapus
  50. Terima kasih saya berhasil mencobanya

    BalasHapus
  51. cara yg kedua knpa gak bisa ya...?

    BalasHapus
  52. terima kasih banyak untuk blog ini yang sangat berguna bagi semua pengunjung, terutama untuk diri saya sendiri yang sedikit banyak mendapatkan pengetahuan tentang isi diskusi yang ada di beberapa artikel ini dan saya mengatakan terima kasih banyak untuk penulis web ini meskipun saya tidak mengenal orangnya secara langsung namun karyanyalah yang bisa membuat orang kagum kepadanya... sukses untuk anda!!!
    obat pembesar penis
    alat bantu sex
    obat perangsang wanita
    vimax
    alat bantu sex
    obat kuat

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.