Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Efek Bubble (Gelembung) Pada Cursor

Membuat Efek Bubble (Gelembung) Pada Cursor
Selamat malam, salam Blogger.. :D Bagaimana tampilan blogmu? Sudah oke? Kali ini Belajar Ngeblog di BLOG menyajikan salah satu cara membuat blogmu terlihat berbeda. Kalau dulu pernah kita membuat efek bintang sekarang ganti membuat efek bubble (gelembung) yang akan mengikuti cursor. Sama seperti mainan anak-anak kecil yang bola yang bergelembung-gelembung dari sabun itu loh,, tapi di terjadi di blog dan cursornya adalah penghasil bubble (gelembung-gelembung) itu.

Saya pernah mencoba, dan lucu. Gelembung itu dari berasal dari cursor kecil lalu lama-lama besar dan naik ke atas. Ibarat sebuah halaman atau toko, kadang blog juga perlu kejutan atau tampilan yang berbeda dari biasanya. Efek bubble (gelembung) ini bisa menjadi pilihan ketika ingin membuat berbeda itu. Dan melepas (menghapusnya) ketika sudah mulai bosan. ;)

Cara Membuat Efek Bubble (Gelembung) Pada Cursor
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

    // <![CDATA[

    var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles

    var bubbles=100; // maximum number of bubbles on screen

    var x=ox=400;

    var y=oy=300;

    var swide=800;

    var shigh=600;

    var sleft=sdown=0;

    var bubb=new Array();

    var bubbx=new Array();

    var bubby=new Array();

    var bubbs=new Array();

    window.onload=function() { if (document.getElementById) {

    var rats, div;

    for (var i=0; i<bubbles; i++) {

    rats=createDiv("3px", "3px");

    rats.style.visibility="hidden";

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="1px";

    div.left="0px";

    div.bottom="1px";

    div.right="0px";

    div.borderLeft="1px solid "+colours[3];

    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="0px";

    div.left="1px";

    div.right="1px";

    div.bottom="0px"

    div.borderTop="1px solid "+colours[0];

    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.left="1px";

    div.right="1px";

    div.bottom="1px";

    div.top="1px";

    div.backgroundColor=colours[4];

    div.opacity=0.5;

    if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);

    bubb[i]=rats.style;

    }

    set_scroll();

    set_width();

    bubble();

    }}

    function bubble() {

    var c;

    if (x!=ox || y!=oy) {

    ox=x;

    oy=y;

    for (c=0; c<bubbles; c++) if (!bubby[c]) {

    bubb[c].left=(bubbx[c]=x)+"px";

    bubb[c].top=(bubby[c]=y)+"px";

    bubb[c].width="3px";

    bubb[c].height="3px"

    bubb[c].visibility="visible";

    bubbs[c]=3;

    break;

    }

    }

    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

    setTimeout("bubble()", 40);

    }

    function update_bubb(i) {

    if (bubby[i]) {

    bubby[i]-=bubbs[i]/2+i%2;

    bubbx[i]+=(i%5-2)/5;

    if (bubby[i]>sdown && bubbx[i]>0) {

    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

    bubb[i].width=bubbs[i]+"px";

    bubb[i].height=bubbs[i]+"px";

    }

    bubb[i].top=bubby[i]+"px";

    bubb[i].left=bubbx[i]+"px";

    }

    else {

    bubb[i].visibility="hidden";

    bubby[i]=0;

    return;

    }

    }

    }

    document.onmousemove=mouse;

    function mouse(e) {

    set_scroll();

    y=(e)?e.pageY:event.y+sleft;

    x=(e)?e.pageX:event.x+sdown; }

    window.onresize=set_width;

    function set_width() {

    if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

    }

    else if (typeof(self.innerHeight)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

    }

    else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

    }

    else {

    swide=800;

    shigh=600;

    }

    }

    window.onscroll=set_scroll;

    function set_scroll() {

    if (typeof(self.pageYOffset)=="number") {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

    }

    else if (document.body.scrollTop || document.body.scrollLeft) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

    }

    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

    sdown=document.documentElement.scrollTop;

    }

    else {

    sdown=0;

    sleft=0;

    }

    }

    function createDiv(height, width) {

    var div=document.createElement("div");

    div.style.position="absolute";

    div.style.height=height;

    div.style.width=width;

    div.style.overflow="hidden";

    return (div);

    }

    // ]]>

    </script>

5. Kode warna pink adalah kode warna dari bubble (gelembung) itu, kamu bisa mengubah dengan kode warna yang lain.
6. Simpan jika sudah selesai.

64 komentar untuk "Membuat Efek Bubble (Gelembung) Pada Cursor"

  1. keren,,,,!!!! thanks bro wat infonya,,,,

    BalasHapus
  2. tipsnya lengkap dan jelas mas,, terimakasih

    BalasHapus
  3. waduuuh? panjang banget ya script-nya... but, thanks :D i'll try it soon ~

    BalasHapus
  4. bisa minta kode warna biru ngga?? :D

    BalasHapus
  5. pencari dollar30 Januari 2012 15.46

    mau 1 dollar gratis per bulan??? silahkan klik http://signup.wazzub.info/?lrRef=d1dda , udah banyak yang daftar, jangan sampe lo ketinggalan

    BalasHapus
  6. Gan Please Join Blog Saya
    http://hack-pas.blogspot.com/

    BalasHapus
  7. tanya nih gan, apa dengan kode-kode tersebut diatas tidak akan membuat berat loading blog ya gan, tolong penjelasannya

    BalasHapus
  8. Makasih mas atas infonya, ane coba ternyata biza!

    BalasHapus
  9. gan aq mau nanya nihh,,
    klo ukuran gelembung nya bisa di ubah ga tuhh..???

    BalasHapus
  10. TRIMS TAMBAHAN ILMUNYA....SANGAT BERMAMFAAT

    BalasHapus
  11. thx infonya gan . .

    visit my blog at saputrax.blogspot.com

    BalasHapus
  12. nice info :D
    buat blogger yang mau di follback follow blog aq y :)
    www.hitech98.blogspot.com

    BalasHapus
  13. infonya menarik-menarik gan ;;)

    BalasHapus
  14. Keren gan.............

    kunjungi saya juga yaaaaa.............

    http://maulanabrain.blogspot.com/

    BalasHapus
  15. keren gan
    keep posting yg keren2 ya :D

    BalasHapus
  16. keren,, cantik ....maksih infonya..

    BalasHapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  18. Untuk warna lain, liat disini
    http://camex.wen.ru/Sampel/Warna.html

    BalasHapus
  19. BAgus gan.,.,.,.,

    Thanks.........

    BalasHapus
  20. keren bak !!!
    visit punya saya ya

    eror-2000.blogspot.com

    BalasHapus
  21. maknyos tutorialnya

    BalasHapus
  22. mantab sob infonya 8-}

    BalasHapus
  23. thenkyu sob infoNya..
    salam blogger n salam kenal
    mampir ya sob, kungjung balik,,,

    http://indra-combination.blogspot.com/search/label/EFFECT%20BLOG

    BalasHapus
  24. kereeen.. tp saya belum sukses mencobanya.
    Makasiih sdh pernah mampir di blog saya (di postingan tentang batik dan ponpes langitan), dan saya baru sempat membalas berkunjung.
    salam kenal :)

    BalasHapus
  25. Tengkyu Gan... Mantap And Berguna Banget... :D
    Cendol Gan :X

    BalasHapus
  26. Reynal Danu Gustian8 September 2012 18.26

    Thanks.. ya Gan :)]

    BalasHapus
  27. Dasar emang ga punya dasaran ilmu javascript,tetep aja bingung meski ada tutoor nya :(.
    Lebih detail dong gan ?
    budibhodonk.blogspot.com

    BalasHapus
  28. kok gg ada tulisan RANCANGAN .., ?/ DI BLOG SAYA.,?/ ITU BAGIAN MANA YA ??`` ~X

    BalasHapus
  29. wah...banyak juga ya...aplikasi nya...trims ya...

    BalasHapus
  30. mampir di blog saya juga yaa..

    BalasHapus
  31. panjang sekali scriptnya
    terima kasih, nanti akan saya coba praktekkan dalam blog saya

    BalasHapus
  32. berguna sekali :D
    kunjungi blog saya ya http://diyahoctvianti.blogspot.com/

    BalasHapus
  33. hohoho ,, kok gak keluar ya gelembungnya , saya salah dmana nya ya ?

    BalasHapus
  34. mantap nih postnya, kunjungi dan follow juga yaa www.citgem-tangerang.com good u blog

    BalasHapus
  35. thanks info'x gan, bermanfaat sekali bagi saya ..

    BalasHapus
  36. Keren :)
    Follow jga yah http://akzyfenrylakbar.blogspot.com/

    BalasHapus
  37. Mantap infonya gan http://goo.gl/EIaxRg | http://goo.gl/Uwy541

    BalasHapus
  38. Kode untuk warna lainnya bisa didapat dimana?

    BalasHapus
  39. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    BalasHapus
  40. mantap gan jangan lupa kunbal ya

    BalasHapus
  41. kok gekembungnya kecil?? :-/

    BalasHapus

Berlangganan via Email