Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog
Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog - Sobat blogger, jika sebelumnya saya ada membuat artikel mengenai Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog, kali ini saya akan share artikel yang sedikit berbeda dengan artikel sebelumnya, yaitu Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog.


Oke, langsung saja. Jika sobat blogger ingin menggunakannya di blog sobat, ikuti langkah-langkah berikut.

  • Login ke akun blog sobat.
  • Pilih Tata Letak =>> Add Gedget / Tambahkan Gedget.
  • Pilih HTML/Javascript.
  • Kemudian Copy kode dibawah ini, kemudian Paste di HTML/Javascript.


<script type="text/javascript">// <![CDATA[
var colours=new Array("#0000FF", "#0BE019", ":#0A0DE6", ":#FF0000", "#66FFFF"); // Warna untuk atas, kanan, bawah dan kiri border dan background gelembung
var bubbles=140; // jumlah maksimum gelembung pada layar

    var x=ox=400;
    var y=oy=200;
    var swide400;
    var shigh=300;
    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>


  • Kode yang berwarna Biru adalah kode yang bisa sobat ganti untuk warna Gelembung / Bubbles. Kode yang berwarna Merah adalah kode jumlah maksimum gelembung yang ditampilkan pada layar.
  • Simpan dan lihat hasilnya.


Demikian artikel mengenai Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog. Semoga artikel ini dapat berguna dan bermanfaat. Salam blogger.

Ditulis Oleh : Rosby Pranajaya M. Nandjan ~ Mari Berbagi

Mari Berbagi Sobat sedang membaca artikel tentang Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya


Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner




7 komentar:

  1. PROMO BESAR BESARAN GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN
    MINAT PIN BB: 582F8501 HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/
    Ready Stock! Apple iPhone 5 32GB Rp.2.500.000
    Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000
    Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000
    Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000
    Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000
    Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000.
    Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000
    Ready Stock! Samsung Galaxy S3 I9300 .Rp.1.500.000.
    Ready Stock! Samsung Galaxy S6 32GB Rp.3.300.000
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.000.000.
    Ready Stock! Samsung Galaxy Note 4 SM-N910H Rp.3.500.000
    Ready Stock! Samsung Galaxy Note 3 Rp.2.000.000
    Ready Stock ! Samsung Galaxy S5 Rp.2.000.000,
    Ready Stock ! Samsung Galaxy S4 l9500 Rp.1.500.000

    BalasHapus
  2. PROMO BESAR BESARAN GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN
    MINAT PIN BB: 582F8501 HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/
    Ready Stock! Apple iPhone 5 32GB Rp.2.500.000
    Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000
    Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000
    Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000
    Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000
    Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000.
    Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000
    Ready Stock! Samsung Galaxy S3 I9300 .Rp.1.500.000.
    Ready Stock! Samsung Galaxy S6 32GB Rp.3.300.000
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.000.000.
    Ready Stock! Samsung Galaxy Note 4 SM-N910H Rp.3.500.000
    Ready Stock! Samsung Galaxy Note 3 Rp.2.000.000
    Ready Stock ! Samsung Galaxy S5 Rp.2.000.000,
    Ready Stock ! Samsung Galaxy S4 l9500 Rp.1.500.000

    BalasHapus
  3. makasih yah atas informasinya, jangan lupa kunjungi blog aku juga.
    QUEENXXX92

    BalasHapus
  4. PROMO AKHIR TAHUN SAMPAI 31 DESEMBER 2017
    KESEMPATAN EMAS UNTUK ANDA!!! BELANJA DI TOKO
    Kami DELIMA PONSEL Mengadakan Harga Promo
    Beli 1 Gratis 1 Samsung Galaxy J1
    berlaku untuk semua produk
    Gadget , Kamera, Laptop...!!!

    READY STOCK
    HP Samsung,Oppo,Acer,Sony,Apple,BB,LG,Nokia
    KAMERA Nikon,Sony,Canon,Kamera Video
    LAPTOP Hp,Lenovo,Samsung,Toshiba,Acer,Asus,DeLL

    UNTUK INFO PRODUK LENGKAP KUNJUNGI:
    http://delima-ponsel.blogspot.com.
    CALL☎/SMS✉: 0852-4004-4475
    BBM PIN: 5B3C6CE

    BalasHapus

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan.

Yang tidak diperbolehkan dalam berkomentar :
1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau PORNO.
3. Komentar Saling CACI MAKI.
4. Komentar yang Memasukan LINK IKLAN dan LINK AKTIF.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.