Tutorial : Bubbles Cursor Effect

Assalamualaikum!!~
Camat tengahari murid-murid !! whoaa.~
Belagak pulak jadi cikgu yerr , Cik Lyssa ? HAHA!
Oraitt ! :)
Now , Lyssa nak ajar macam mana nak buat Bubbles Cursor Effect :)

Sebab ada reader yang tanya :)


 

Oraitt sygg ! Kalau nak tahu.. Meh sini mehh  Lyssa ajarin ! :))
1. Dashboard > Design > Add Gadget > Html/Javascript

2. Then , copy kod di bawah and paste di ruangan html/javascript tuh ye :

<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>



**Yang warna merah tuh , korang boleh tukar kod warna yang korang nak ye! DI SINI !!









PERHATIAN!!

Pada sesiapa yang sebelum ini telah menggunakan "SPARKLING CURSOR" ,
diharapkan korang bolehlah delete kod yang itu , 
kalau korang nak guna bubles cursor ini.. orait?? 
Takot-takot tak menjadi pulak ! :))

KONGSIKAN ARTIKEL INI..
Previous
Next Post »

137 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
Wanaa
AUTHOR
April 2, 2011 at 1:46 PM delete

first !! hehe

thanks for share this tuto =)

avatar
April 2, 2011 at 1:48 PM delete

i amek tuto nie . thanks for sharing dear :)

avatar
eVariena♥
AUTHOR
April 2, 2011 at 1:57 PM delete

npe sy pnye x jd sys?? ;(

avatar
April 2, 2011 at 2:01 PM delete

@eVariena♥

tk jadi.? cuba lagi sekali !:))

avatar
Ezatie Boo
AUTHOR
April 2, 2011 at 2:05 PM delete

wow ! panjangnya kod . BTW , Thankx for the tutorial . ;D

avatar
eVariena♥
AUTHOR
April 2, 2011 at 2:09 PM delete

cubaan ke 3 br jadi...hahax :D

thanx sys..

avatar
Nadiah
AUTHOR
April 2, 2011 at 2:30 PM delete

lyssa di tag ! :Phttp://ct92nad.blogspot.com/2011/04/assalamualaikum.html

avatar
Nadiah
AUTHOR
April 2, 2011 at 3:14 PM delete

lyssa, camne nak wat link kat comment ? thanks :)-

avatar
April 2, 2011 at 3:38 PM delete

dahh jadi ! hee tq sis !! :)

avatar
Pyqah
AUTHOR
April 2, 2011 at 4:15 PM delete

TQ share tuto ni..Dlm proses nak cantekkan blog nie..Huhuh..Xbape nak kreatif sgt la..Huhuh..

avatar
Khalilah
AUTHOR
April 2, 2011 at 4:24 PM delete

panjang tul code die..
tpi sy punye dah jdi... :)
thx kak lyssa..

avatar
Falling .
AUTHOR
April 2, 2011 at 5:15 PM delete

sis amek yg nih.. tq ya!

avatar
Nor Suraya
AUTHOR
April 2, 2011 at 5:41 PM delete

akak,kenape saye punye tak jadi...

avatar
April 2, 2011 at 7:04 PM delete

@NAD_YA

ohh . link kat komen tuh,, Lyssa tk thu lah dear... nnty,, Lyssa thu nnty,, Lyssa kasikk taw erkk ;)

avatar
April 2, 2011 at 7:04 PM delete

@mimie

hehe.. yup yup.. welcome:))

avatar
April 2, 2011 at 7:05 PM delete

@pyqah87

heheh .tk pe.. perlahan2!! lama nnty,,, jadi kreatif lah ! :))

avatar
April 2, 2011 at 7:05 PM delete

@mizz ILa

ehee .code dia.. mmg pnjg... asalkan .. sudahh jadi cukup ! huhuhuhu kan ::))

avatar
April 2, 2011 at 7:07 PM delete

@Nor Suraya

aitt ? tk jadii.. cuba try lagi.. mn nk thu , kot2 tertinggal pape ker.. masa nak copy tuhh ;p

avatar
Nor Suraya
AUTHOR
April 2, 2011 at 10:51 PM delete

ok,thankx kak lyssa,tak delete yg sparkling cursor tadi....

avatar
April 3, 2011 at 6:09 AM delete

@Nor Suraya

haa. tuh lahh .punya besaqq akk tulis perhatian tuh.. mesti tk baca abiss niyh ! HAHA :))

avatar
Tsy M
AUTHOR
April 3, 2011 at 4:04 PM delete

Thanks kak for the tuto ^^

avatar
Anonymous
AUTHOR
April 3, 2011 at 9:23 PM delete

cik lyssa , xde ke kod yang ringkas ? xley nak copy la..hehe ^^

avatar
Eiyka Yusof
AUTHOR
April 5, 2011 at 1:29 AM delete

yeah ! jadik juga ! tengs sys ;)

avatar
Nadiah
AUTHOR
April 5, 2011 at 6:00 PM delete

lyssa ! dah tau . hee.

avatar
Unknown
AUTHOR
April 5, 2011 at 6:42 PM delete

lwa2 :) suda buad,tengs :))

avatar
April 9, 2011 at 11:13 PM delete

dahh jadii :) thanks lyssa, lyssa cantek hari ni. hee~

avatar
April 10, 2011 at 10:12 AM delete

welcome lah semua nyer yerr ;)

avatar
anem
AUTHOR
April 14, 2011 at 12:37 PM delete

best..jadi laa....dari semalam buat..akhirnyer jadi jugak...thanks...suke!!

avatar
KHAI_AIRIN
AUTHOR
April 15, 2011 at 10:08 PM delete

akak . jadi la , hee thanks =) akak dah tlong sya cntekkan blog sya .

avatar
April 18, 2011 at 6:35 PM delete

Sis, cmne kalau nak buih tu keluar laju2?

avatar
aini mira
AUTHOR
April 28, 2011 at 8:42 PM delete

thanx kak lyssa... :)

avatar
May 3, 2011 at 4:02 PM delete

thanks kak lyssa..alhamdulillah..dh jd..

avatar
Anonymous
AUTHOR
May 4, 2011 at 5:54 PM delete

thanks kak lyssa.. :)

avatar
May 6, 2011 at 7:57 PM delete

akak lyssa,number of bubbles tu leh d'tukar kan?kan?kam?kan? O_O??

avatar
May 6, 2011 at 7:57 PM delete This comment has been removed by the author.
avatar
iQa's HuDs0n
AUTHOR
May 12, 2011 at 9:41 PM delete

akak,,cursor yg lain ader x??suke tgok gamba ngan bf tuh..hihihi

avatar
May 14, 2011 at 9:49 PM delete

sys, knp bile letak bubbles ni, cursor lollipop sy hilang ek? mmg mcm tu ke?

avatar
May 14, 2011 at 9:51 PM delete

ohhh, okeoke. dh jd dh. cursor x hilang. thnxx sys :D

avatar
aRiE niSS
AUTHOR
May 18, 2011 at 1:55 AM delete

cam biase lyssa..done..thanks..=)

avatar
iRiyn
AUTHOR
May 18, 2011 at 2:44 PM delete

sis lyssa , law ad bubbles kat blog kan best :D ad code dea ta ? V^^

avatar
halilyism
AUTHOR
June 3, 2011 at 2:09 PM delete

terima kasih... jadik suda...

avatar
Nur Izzati
AUTHOR
June 3, 2011 at 4:02 PM delete This comment has been removed by the author.
avatar
dzuliyana
AUTHOR
June 11, 2011 at 3:02 PM delete

kaq... ta jd pon,, :(

avatar
siti nabihah
AUTHOR
June 18, 2011 at 6:54 PM delete

ape maksod curso??
boleh sy tau..

avatar
eyla.aziela
AUTHOR
July 1, 2011 at 7:31 PM delete

yeaaa...dpt buat..tengs sis.. :)

avatar
Anonymous
AUTHOR
July 3, 2011 at 3:22 PM delete

Thanks kak Lyssa :) Jadii :)

avatar
Anonymous
AUTHOR
July 6, 2011 at 9:32 PM delete

saia amek tuto ne yea .. credits for u .. *winkwink*

avatar
Hadrymuhd
AUTHOR
July 14, 2011 at 1:40 AM delete

hmm , akak macam mana nak buat post title tu jadi warna-warni ye ?

avatar
Syifa Rizal
AUTHOR
July 14, 2011 at 10:20 AM delete

kaka lyssa ,

mcm mna na bd post title dlm bntuk mcm kaka lyssa tu ? Pliss , ajrkn .

avatar
-Dina-
AUTHOR
July 29, 2011 at 3:51 AM delete

Kak , letak link dye boleh ? nak cari tk reti lah :)

avatar
Unknown
AUTHOR
July 30, 2011 at 4:38 PM delete

thx fo the tutorial =)
puas mcari daaa...

avatar
Adlena Eliya
AUTHOR
August 6, 2011 at 8:09 AM delete

jady jadik..tingkayyu..

avatar
OKASHAU
AUTHOR
August 6, 2011 at 11:47 PM delete

kak..knpa xleh copy pon..time nk paste dkat html 2 xda pon.pstu dya kluaq code len..

avatar
Lala
AUTHOR
August 8, 2011 at 9:29 PM delete

makasih, dah jadi neeh

avatar
SmallSmall
AUTHOR
August 11, 2011 at 9:01 PM delete

err -.- wahh ! menjadi menjadi ! kehkehkehh . Thanks Kakak Lyssa ;D

avatar
Fynaz Razman
AUTHOR
August 14, 2011 at 9:18 PM delete

menjadi sangat , thanks K.Lyssaa ;)

avatar
.
AUTHOR
August 20, 2011 at 10:55 PM delete

Da jd . Thankie you sis :D

avatar
ieda
AUTHOR
August 21, 2011 at 8:51 PM delete

tengss lyssaa!!its work! <3

avatar
Anonymous
AUTHOR
August 22, 2011 at 3:51 PM delete

jadi2 ! best la amek tuto kat blog akak lyssa ! menjadi sume ~

avatar
yatt zain
AUTHOR
August 31, 2011 at 10:05 AM delete

jadi2...heheh..thanx akak...

avatar
September 3, 2011 at 2:52 PM delete

@blue orange Hii kak lyssa! terima kasih tahu , sebab tunjuk tuto ni! Balqis dapat buat :) Thank you so muchhh . tolong visit Balqis punya blog . thank youu :) Balqis selalu tengok tuto Kak Lyssa tahu!:) www.fallinglitter.blogspot.com

avatar
dollylina
AUTHOR
September 7, 2011 at 8:58 PM delete

thanks,akak lysaa alin dah jadi dah...:)

avatar
syera emelda
AUTHOR
September 19, 2011 at 3:44 PM delete

fuyo0 . jd lha kaka lyssa . tengz bb tlg ajrkn .

avatar
creatife
AUTHOR
October 9, 2011 at 8:55 AM delete

Thanks . Dari blog hingga ke blog menengok tutorial . Sorry saya bukan org sni

avatar
Anonymous
AUTHOR
October 11, 2011 at 4:05 PM delete

yeaa ! JADIII , thx Kak lyssa COMEL

avatar
November 21, 2011 at 10:05 PM delete

@ku'na akk , cam ne nie ? navigation bar sy da hilang ! cam ne nk buat dier ade balik ?

avatar
Mizz Noy
AUTHOR
November 23, 2011 at 6:23 PM delete

kak lyssa bubble cursor saye x jdi hehe ^^

avatar
ImanZulaikha
AUTHOR
November 25, 2011 at 6:56 PM delete

lyssa, sy buat dh jd tp xjd sepenuhnya....bila ltk cursor kt header kuar je bintang2 tuh tp kt tpt lain xkuar pun...n yg peliknya backgroud lak y jd bergerak ke kiri kanan bl gerakkan cursor....huhu...why lyssa? help me...tq

avatar
Syaysa
AUTHOR
November 25, 2011 at 9:40 PM delete

kak lysa..boleh tolong ajar ..kalau kite dah copy link2 mne2..
die surh paste kat edit html..saya tk pandai nak gune edit html..ajar kan..

avatar
November 28, 2011 at 3:33 AM delete

hyee ..thanks lyssa..dah jade.. :)

avatar
shera
AUTHOR
December 2, 2011 at 6:38 PM delete

akak , macam mane nak buat button follow dengan dashboard dekat bahagian atas sebelah kiri 2 .

avatar
December 2, 2011 at 10:14 PM delete

salam sys lyssa , kenapa sys punya cursor dekat bubbles tuh bentuk love , myra pon na macam sys . cantikkk gilee . tapi dekat blog myra keluar bubbles bulat2 jea . myra na bubbles cam sys (bentuk leb)

avatar
December 4, 2011 at 5:39 PM delete

akak.. mcm mane nk buat kalau gerakkan curos je. ade gambar.. bole tunjukkan tak?

avatar
Mitsu Mits :3
AUTHOR
December 6, 2011 at 1:35 PM delete

kakak ! it's hard right ? Grr ~

avatar
cik donat
AUTHOR
December 9, 2011 at 6:04 PM delete

@caidamcm anew kaq wat anak panah comey tuh

avatar
AinaMarhaini
AUTHOR
December 22, 2011 at 9:18 PM delete

@Lyssa Dollixious

Kak Lyssa,macam mana kak Lyssa buat anak panah tu gambar kak Lyssa ?

avatar
syasya azyz
AUTHOR
December 22, 2011 at 11:49 PM delete

ermm...akak..leh tnya x??yg psal cursor effect tuu..saya xpham laa..huhuhupning kpala saya mmikirkn nyaa...hoho~

avatar
January 1, 2012 at 5:18 PM delete

akk kenapa x jdk plk sya buat hehe????!!

avatar
Mrs_Husna
AUTHOR
January 2, 2012 at 6:17 PM delete

cantik :)..tq..sy gune yg ni yer

avatar
January 11, 2012 at 7:25 PM delete

hai awk..tenkiu coo much tau bnyk sy gune tuto awk kt blog sy..lub u bebeh

avatar
Anonymous
AUTHOR
January 23, 2012 at 3:35 PM delete

sini adalah link ke situs baru untuk megauploade
[url=http://173.192.82.7//] megauploade [/url]
http://173.192.82.7/
Saya juga meminta Anda untuk berbagi link dengan teman semua juga untuk menjadi bagian dari anti - Stop Online Piracy Act (SOPA) -
saya pikir megauploade memberi kita membagikan kualitas pelayanan yang baik dan sekarang adalah waktu kita untuk membayar kembali .
 
banyak terima kasih

avatar
HaNaZaNa LoVe
AUTHOR
January 25, 2012 at 8:42 PM delete

aslkm, kak lysaa klu kta gna html bnyk sngt kan untuk wt bnda tu bnda ny tp xdk title so mcm mna klu kta xmau bg nmpak kotak2 tu bnyk sngt erkk,, pst kak lysaa xphm kn apa yg sy tlis,,

avatar
yana
AUTHOR
February 7, 2012 at 10:21 AM delete

salam kak lyssa comel!
ni nak tanye sikit nie
"klau gne blogskin bleh x nak buat bubbles nie ?
ape link ye ea ?
plez gi taw sye...
k bai.. (hrp kak lyssa gitaw sye ea)
thanks... suke gne toturial kk lyssa comel nie..

avatar
February 15, 2012 at 12:28 PM delete

Salam Kaq lysa , thankz sbb bgi link java 2 , mnjadi la :)

avatar
February 19, 2012 at 10:13 AM delete

akak,nk tanye skit...kene copy smua ke ???

avatar
Anonymous
AUTHOR
April 6, 2012 at 10:20 PM delete

Akak, macam mane nak buat pop out box bila orang nak copy paste gambar dalam blog ?

avatar
Anonymous
AUTHOR
April 6, 2012 at 10:20 PM delete

Akak, macam mane nak buat pop out box bila orang nak copy paste gambar dalam blog ?

avatar
iera sufiera
AUTHOR
April 30, 2012 at 1:06 PM delete This comment has been removed by the author.
avatar
iera sufiera
AUTHOR
April 30, 2012 at 1:07 PM delete

salam kak lyssa...cam ne nk ltk lagu kat dlm blog...and cam ne nk tkr kan arrow jadi bntuk lain?

avatar
iera sufiera
AUTHOR
April 30, 2012 at 1:07 PM delete

salam kak lyssa...cam ne nk ltk lagu kat dlm blog...and cam ne nk tkr kan arrow jadi bntuk lain?

avatar
iera sufiera
AUTHOR
April 30, 2012 at 1:08 PM delete

salam kak lyssa mcm mne nk ltk lagu kat dlm blog..and cam ne nk tkr kan arrow jdi bntuk lain?

avatar
GadiS CelOteH
AUTHOR
June 10, 2012 at 3:07 PM delete

lyssa , saye nakk edit blog n nak try letak bubbles nieyhh ! tapi saye gne blogskin .. bile saye check balekk dashboard saye .. DESIGN hilang .. yg lain 2 ade juz design je yg hilang ! cmne nak watt ?

avatar
nurul syasha
AUTHOR
June 15, 2012 at 7:50 PM delete

akak ! terima kasih .. jadi dh . cntik , mmg nk sgt tuto ni =D

ni blog saya : http://nurulsyasha-capitals.blogspot.com/

avatar
Ayna Suffya
AUTHOR
June 17, 2012 at 11:32 PM delete

tanx sis lyssa... !
akk punya tuto bnyk membntu sya dlm bl0g...
btw, tans skali lgy..

avatar
Unknown
AUTHOR
September 17, 2012 at 12:53 AM delete

jadilah :)
thanks akak .

avatar
Unknown
AUTHOR
October 9, 2012 at 2:49 PM delete

nak tukar colour mcm mane ??

avatar
jOm tErjah!!!
AUTHOR
November 16, 2012 at 9:36 AM delete

thanks...alhamdulilah menjadi

avatar
Unknown
AUTHOR
December 15, 2012 at 7:35 PM delete

@ku'nacmne nk uat cam akak punye yg cursor tu?

avatar
Unknown
AUTHOR
January 12, 2013 at 9:26 AM delete

kak lyssa . cmmna nk bwt tick expand widget .. ps 2 gna ctrl f . x reti .. i'm stil new . hehehehe

avatar
Nu'iz
AUTHOR
January 29, 2013 at 9:35 PM delete

Huhu !! Kak Lyssa !! kenapa ngan Blog saye ni ?? Kalau nak buat ape2 sparkles mesti tak boleh !! Sebab Zaty dah buat sekali tapi tiba2 sparkles tuh hilang !! sekarang ape pun tak boleh buat !!

avatar
Unknown
AUTHOR
February 14, 2013 at 4:21 PM delete

@Syahe
saye amek tuto nie ye.thnk kak lyssa

avatar
Unknown
AUTHOR
August 27, 2013 at 12:25 PM delete

dah jadi..tq lyssa..:) http://ummuiffahcollection.blogspot.com/

avatar
Amy Belle
AUTHOR
January 3, 2014 at 4:22 PM delete

Kak lyssa nak tanya camne nak hias blog cam ade wall warna warni dan mouse kita tu tetulis nama kita???

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon