Home
tutorial
Tips-Tips

02 April 2011

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 ! :))


137 000 orang Pengomen Terhebat !!:

ku'na said...

first !! hehe

thanks for share this tuto =)

Cik Dot's Blog said...

i amek tuto nie . thanks for sharing dear :)

Aeedaa Meerah ♥ said...

makasih akak :)

Lyssa Dollixious said...

@ku'na

eheehhh . oke darl ;))

Lyssa Dollixious said...

@Cik Dot's Blog

yupp . hehe .welcome saje!XD

Lyssa Dollixious said...

@Aeedaa Meerah ♥

sama-sama dexx ;))

eVariena♥ said...

npe sy pnye x jd sys?? ;(

♥misz nana♥ said...

thnx 4 sharing this :)

Lyssa Dollixious said...

@eVariena♥

tk jadi.? cuba lagi sekali !:))

Lyssa Dollixious said...

@♥misz nana♥

welkem !:))

Єʓαтιɛ ƆнσcσℓαтɛƆнɛɛƨɛƆακɛƖcɛ-cяɛαм said...

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

Lyssa Dollixious said...

@Єʓαтιɛ ƆнσcσℓαтɛƆнɛɛƨɛƆακɛƖcɛ-cяɛαм

hahah . memangg pnjng !!:))

cama-2!~CL

eVariena♥ said...

cubaan ke 3 br jadi...hahax :D

thanx sys..

Lyssa Dollixious said...

@eVariena♥

hahaha .welcomeelah ;)

NAD_YA said...

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

Lyssa Dollixious said...

@NAD_YA

aahaha . tinkiuu ye dear;)

NAD_YA said...

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

mimie said...

dahh jadi ! hee tq sis !! :)

pyqah87 said...

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

mizz ILa said...

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

..arcmabaharin.. said...

sis amek yg nih.. tq ya!

Nor Suraya said...

akak,kenape saye punye tak jadi...

Lyssa Dollixious said...

@NAD_YA

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

Lyssa Dollixious said...

@mimie

hehe.. yup yup.. welcome:))

Lyssa Dollixious said...

@pyqah87

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

Lyssa Dollixious said...

@mizz ILa

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

Lyssa Dollixious said...

@..arcmabaharin..

okiee dear! welcome ;))

Lyssa Dollixious said...

@Nor Suraya

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

Nor Suraya said...

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

Lyssa Dollixious said...

@Nor Suraya

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

tasya linda said...

Thanks kak for the tuto ^^

Lyssa Dollixious said...

@tasya linda

yupp .welcomee yaww!!ahaa

Anonymous said...

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

Eiyka Yusof said...

yeah ! jadik juga ! tengs sys ;)

NAD_YA said...

lyssa ! dah tau . hee.

manjer :) said...

lwa2 :) suda buad,tengs :))

rara equal to single said...

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

Lyssa Dollixious said...

welcome lah semua nyer yerr ;)

Gamal's daughter said...

Alhamdulillah maw jugak..tq..

anem said...

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

KHAI o.O said...

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

Fadzzureen ♥♥ said...

Sis, cmne kalau nak buih tu keluar laju2?

NaninSyaeza said...

Thankss kak Lyssa :)

aini mira said...

thanx kak lyssa... :)

marionette myrrh said...

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

Syera Abdullah said...

thanks kak lyssa.. :)

Hamba Allah said...

thanks darl :)

kaoru_XX_peace said...

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

kaoru_XX_peace said...
This comment has been removed by the author.
aTiQa's SaHaInI said...

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

VanillaIce said...

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

VanillaIce said...

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

caida said...

thank you .

aRiE niSS said...

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

Irynn said...

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

momoe love said...

terima kasih... jadik suda...

nur izzati ^_^ said...
This comment has been removed by the author.
Δ∂@м Δʓя@ι said...

npr x jadi pon???

no boyz no cry said...

kaq... ta jd pon,, :(

mjaybugs said...

love it!!=)

siti nabihah said...

ape maksod curso??
boleh sy tau..

l i t t l e m i n n i e said...

saye try .... heheh

eyla.aziela said...

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

Leana Natasya Zulkifli said...

Thanks kak Lyssa :) Jadii :)

Umiey F said...

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

Hadrymuhd said...

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

Cyfa TaeYang . said...

kaka lyssa ,

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

-Dina- said...

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

Aen Mardya said...

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

lenaliya.blogspot said...

jady jadik..tingkayyu..

zoela tiffany said...

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

Lala said...

makasih, dah jadi neeh

SmallSmall said...

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

fienaz said...

menjadi sangat , thanks K.Lyssaa ;)

elmo story ! said...

Da jd . Thankie you sis :D

ieda said...

tengss lyssaa!!its work! <3

kayana nur syasya said...

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

blue orange said...

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

Balqis Delima Putry said...

@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

dollylina said...

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

syahirah yaacob said...

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

creatife said...

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

Fatin Nazifah said...

yeaa ! JADIII , thx Kak lyssa COMEL

ira khairi said...

tanks kak lysa

Najwa Ismail said...

ThankYou kak Lyssa : )

Nurul Syahirah said...

Tengkiu sis...

Yas 'n' Mun Blog said...

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

Mizz Noy said...

kak lyssa bubble cursor saye x jdi hehe ^^

ImanZulaikha said...

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

Aina said...

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

puteri fareesa said...

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

shera said...

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

myra oh myra said...

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)

Nurul Zawani said...

trime kasih akak :)
<3

nafelafieqa said...

THANKS KAKK :D

ezrren natasha said...

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

cik ashraff said...

thanks kak :)

Nieysah Pages said...

kakak ! it's hard right ? Grr ~

chocolate sweet story said...

@caidamcm anew kaq wat anak panah comey tuh

Ira Aziz said...

oh thanks Kak Lyssa...

aina marhaini said...

@Lyssa Dollixious

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

syasya azyz said...

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

Qieysz Tieyna______Purple Liciouse said...

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

Miss_H said...

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

psst my secret said...

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

Anonymous said...

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

HaNaZaNa LoVe said...

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

AnisAzira said...

buihh ?? mcm mne ?

yana said...

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

My Life Story Mory ◕‿◕ said...

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

Nur Izzati Adila Yusof Alyahya said...

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

Tyra said...

thanks sis ! it works ! ^__^

Ainin Teo said...

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

Ainin Teo said...

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

la la la said...
This comment has been removed by the author.
la la la said...

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

la la la said...

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

la la la said...

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

Gadis Purple Pink Hitam said...

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 ?

nurul syasha said...

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

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

Ayna Suffya said...

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

Rozham said...

x jadi ponw....

sabrina zulkifli said...

akak lyssa x jadi pon :(

Hazwaniey Nadzim said...

Thanks k :)

Farah Syazana said...

jadilah :)
thanks akak .

eqin fiq said...

menjadilah... tq dear

Syarif ARif said...

nak tukar colour mcm mane ??

Puteri Pelangi said...

nice info tqvm (^_^)

jOm tErjah!!! said...

thanks...alhamdulilah menjadi

nurul a'ilah said...

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

~~aLL aBoUt mE~~ said...

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

Nurizzati Ros Awari said...

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

Nurul Syahirah Ezzaty said...

thkz kak lyssa

Nurul Syahirah Ezzaty said...

@Syahe
saye amek tuto nie ye.thnk kak lyssa

Marha Amni said...

THANKSSSSSSSSSSSS

ahmad usshamma said...

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

Amy Belle said...

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