2 May 2011

Tutorial: Bubbles Cursor(Cursor Ada Buih)

Assalamaualikum. Kihah penat sangat sebab baru balik dari KAFA. Malam satgi ada Tusyen pula. hmm.. Ok la. Kihah ada la bw blog orang. Sekarang ni kan ada 'trend' pula. Dulu sparkle cursor, sekaran ni, buih-buih pula. Hahaha. Kihah cari kat google, Kihah jumpa tutorial ni. Jom buat! credit to:Lyssa. 


1. Dashbord->Design->Page Elemant-> Add a Gadget-> HTML/Javascript.
2. Paste code bi bawah ini di dalam ruangan tersebut.


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


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


        var bubbles=12; // maximum number of bubbles on 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>

 NOTA KAKI : Tukarkan yang warna MERAH  itu kepada warna bubbles pilihan anda. >>DISINI<<

3.Pastekan
4. Save.

Hihihi. Just simple je kan?

Tutorial ini berguna? LIKE please!

9 comments:

Your words defines you