Tutorial - Buat Bubble Cursor

Tweet

Bagaimana cara untuk membuat Bubble Cursor dalam blog? Apabila mengerakkan mouse, efek Bubbles akan akan mengikuti cursor. Korang lihat gambar di bawah untuk preview. Kalau korang suka dan nak buat pada blog korang, korang hanya perlu ikut cara mudah ini.

Tutorial Blog - Cara untuk membuat efek Bubbles pada Cursor.

Sila Ikut Langkah ini.
1. Log in ke Dashboard Blogger > Layout > Add New Gadget > HTML/JavaScript

2. Kemudian Copy kod di bawah ni, dan masukkan ke dalam HTML/JavaScript Korang.

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

        // <![CDATA[

        var colours=new Array("#888888", "#888888", "#888888", "#888888", "#666666"); // warna untuk top, right, bottom and left borders and background bubbles

        var bubbles=100; // jumlah maksimum bubbles atas screen

        /****************************
        * JavaScript Bubble Cursor *
        * (c) 2010 mf2fm web-design *
        * http://www.mf2fm.com/rv *
        * 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>

3. Untuk menukarkan warna Bubble Cursor, Ubah kod warna yang bewarna Oren kepada kod warna pilihan korang. Nak cari kod warna Klik Sini.

4. Tukarkan 100 kepada jumlah bubbles atas screen yang korang nak.

5. Save HTML/JavaScript Korang dan Siap!

Selamat Mencuba ^^

Smile :D


Google Tags: Tutorial Blog, Tutorial Blog Bubble Cursor, Tutorial Blog Melayu, Cara Buat Blog, Cara Bina Blog, Tutorial Blogspot, Tutorial Blogger