Bubble Cursor Effect

4/30/2011 Blog Tutorial Blogger Kursor Tips Trik Blog Tutorial Blogger Widget
Bubble Cursor EffectPada postingan sebelumnya pernah saya membahas tentang membuat "Kursor Bersama Bintang Kecil", "Tampilan Kursor Lebih Menarik", "Tanggal dan Jam Mengikuti Mouse/Kursor" dan masih banyak lagi tutorial yang sudah saya posting yang berkaitan dengan masalah Kursor/Cursor.

Nah, mungkin tutorial kali ini yang akan saya bahas beda dengan tutorial kursor sebelumnya yaitu cara membuat "Bubble Cursor Efect". Effek Bubble Kursor adalah bila kita menggerakkan mouse pada halaman blog kita maka akan keluar dari Kursor beberapa gelembung, yang tadinya kecil hingga membesar. Dan makin sering kita menggerakan Kursor makin banyak gelembungan (bubble) yang berterbangan di halaman blog kita. Untuk lebih jelas lagi silahkan sobat gerak-gerakkan mmouse sobat pada kotak di bawah ini untuk melihat langsung demonya.



Nah, cantik kah? berminat kah?

OK. Kalau sobat berminta dan ingin memasangnya di blog masing-masing silahkan ikuti langkah-langkah berikut.

  1. Seperti biasa LogIn ke Blogger sobat
  2. Pada halaman Dasbor klik Rancangan
  3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget, pilih yang HTML/Javascript
  4. Copy dan Paste Kode Bubble Kursor Efeck di bawah ini di ktak HTML/Javascript

    <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

    /****************************
    * JavaScript Bubble Cursor *
    * (c) 2010 mf2fm web-design *
    * http://ade-tea.blogspot.com *
    * DON'T EDIT BELOW THIS BOX *
    ****************************/
    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>


    PERINGATAN!!
    • Kode yang berwarna merah adalah warna Bubble silahkan sobat ganti dengan warna kesukaan sobat, untuk bantuan kode warna silahkan klik disini.
    • Kode yang berwarna biru adalah jumlah Bubble yang akan kita pasang. Sobat boleh menggantinya mau seberapa banyak Bubble yang akan di tampilkan


  5. Setelah semua langkah langkah selesai. Klik tombol SIMPAN, dan lihat hasilnya.


Selamat mencoba mudah-mudahan berhasil dan dapat bermanfaat, Amiin.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

20 comments

saya sungguh senang berkunjung ke Blog sobat, karena penuh dengan informasi yang sangat bermanfaat bagi saya seorang Blogger Newbie, tetapi ada satu hal yang agak menganjal bagi saya dan tak enak rasanya jika tak di ungkapkan, begini kang saya menggunakan koneksi internet yang sangat lambat serta menggunakan modem yang sangat sangat jauh di bawah standar, sehingga untuk sekedar Berblogwalking atau membaca artikel harus membuat saya berjuang ekstra keras untuk dapat membuat tampilan blog kang fathur terload secara sempurna, maaf kang kalo komen ini tidak pantas untuk di publish hanya saya tidak ingin kehilanggan blog langganan kunjungan saya karena koneksi internet saya yang sangat lambat...terima kasih sebelumnya

Balas

@Parking Terimakasi sob tas saran dan kritik dan sarannya, memang blog saya sangat berat sob padahal sudah banyak widget yg saya buang sebelumnya. muudah2an kedepan nanti bisa saya perbaharui, sekali lagi terimakasi

Balas

terima kasih banyak artikel2nya, sangat bermanfaat untuk saya sebagai pemula, maju terusssss !!

Balas

@terima kasih banyak artikel2nya, sangat bermanfaat untuk saya sebagai pemula, maju terusssss !!

Balas

Thanks informasinya,
kalo boleh

Ijin copas gan
Salam kenal...

Balas

kenapa bubble yg keluar tu lambat pergerakannya huh..?? may i know why??

Balas

nice mas.. ^^ coba dlu yah.. thnx ilmu nya.. :)
visit back..

Balas

Artikelnya sangat bermanfaat bos,...ijin Copas bos,...

Balas

.kang fathur..
.boleh inta file Js yg kmbang api bntuk cinta gk ?
.di post dong ..
.makasih..

Balas

Top Banget Blog-nya..
Ijin Copas ya..

Thks

Balas

blog ya keren kak... aku pemula amatir neh, mau banyak belajar. ijin ajarannya dong kalo ada waktu follow balik blog amatiran aku ya.. (malu). di nha4fun.blogspot.com nuhun kang...

Balas

@nha Terimakasi DIK, Insya Allah kalau ada waktu saya ajarin hehehe, tinggal adik ngomong aja mao apa??

Balas

selamat malaem kang. lama saya ga berjunjung, sekalinya saya tengok blog akang udah ganti rupa lagi. weleh - weleh. ditambah banyak banget tips baru yang saya ketinggalan banyak. ijin untuk nyobain script-nya kang. sekali - kali halaman saya minta dikunjungi kang, matur nuhun

Balas

sob aku follow ya
www.lokopou.blogspot.com

Balas
This comment has been removed by the author.

misi.. gan..
mau nanya
ada nya tulisan html di tambah ganget sebelah mana ya??

makasih.. :)

Balas