Tuesday, April 19, 2011

Cara Buat Bubble Cursor Pada Blog


Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.



Contoh cursor bubble yang menarik ini boleh di lihat di test blog ini.

Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)



<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // 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://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. Save dan lihat hasilnya.:)



Note:
Bagi yang hendak tukar bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

Cari kod di bawah dari code yang anda paste tadi, kemudian tukarkan code warna seperti yang dihighlight


Hendak cari kod warna.?
Rujuk code warna di bawah.




Selamat Mencuba.:)


Suka tutorial ini.?

138 comments:

mcm ni lah on April 20, 2011 at 12:08 AM said...

wahhh boleh cuba ni,. tq ehh ,.. sambil tinggal jejak

Iera Afzu on April 20, 2011 at 12:19 AM said...

terima kasih utk tutorial ni. memang dah lama mencari :)

kaki gelak.com~ on April 20, 2011 at 1:30 AM said...

tq..cangat suke

Mila Ahmad on April 20, 2011 at 8:13 AM said...

sy da buat
mekaseh ye! ;)

Cahaya Qaseh on April 20, 2011 at 8:52 AM said...

thx a lot... da lame cari.. ^^,

Anonymous said...

kalau wordpress xde ke???

Elis on April 20, 2011 at 11:21 AM said...

terima kasih!

Syimama on April 20, 2011 at 11:54 AM said...

cantiknya..sy suka tengok warna warni camni..tq

zidEL zhafiz on April 21, 2011 at 2:38 AM said...

sya dah ade snow cursor..boleh double function x..??
snow and bubble at the same time..saya dah buat..x jadi la bubblenya..!! =(

_iezrah! on April 21, 2011 at 8:47 PM said...

elo dear.. thanks. tuto yg mnarik.. :)

hunnys~ on April 22, 2011 at 11:11 AM said...

thnx! chantek sgt3!
suke sangat!
=D

zulhaidi on April 22, 2011 at 11:42 AM said...

nape bubble smakin ke bawah...page jadi besar k kanan...nape erk???

MariaMira on April 23, 2011 at 2:20 PM said...

suke suke ...tq

akubudakejut on April 23, 2011 at 6:30 PM said...

thanks for the tips..i really like it...it was so nice...

Nur Amira Radhiah on April 24, 2011 at 3:29 AM said...

x jadi pun?

FARISZ@AZ.Com on April 24, 2011 at 3:41 AM said...

Menarik,tapi akan ganggu loading blog?
FARISZ@AZ.Com

Mas-Google on April 24, 2011 at 8:42 AM said...

follow aku www.mas-google.blogspot.com/

LadyzuL ⎝⏠⏝⏠⎠™ on April 24, 2011 at 1:23 PM said...

saya ambik ye...

Peter Engku on April 24, 2011 at 4:14 PM said...

Cmne nk bt 2..??

Wayan from bali on April 25, 2011 at 4:28 PM said...

terimakasih infonya.. Bannernya sudah saya pasang, pasang banner saya juga ya

noorfilzahahamad on April 28, 2011 at 5:21 PM said...

tq...cantikk

monsterbuncet on April 29, 2011 at 12:44 AM said...

hye . leyh uat tutorial tok 'border kt entries' tak . tengs :)

ict on April 30, 2011 at 11:02 PM said...

Assalamualaikum, Tahniah dan terima kasih atas ilmu yang ditampilkan. InsyaAllah akan dimanfaatkan sebaik mungkin. Terima kasih.

Hanif C'2u on May 1, 2011 at 1:35 AM said...

hye.. asl buat xbleh pon...

PaPaJaHaT on May 2, 2011 at 3:37 PM said...

done tQ

aiman x kesah on May 4, 2011 at 1:31 PM said...

TQ...jadi laaa

EiEy on May 5, 2011 at 3:54 PM said...

thankz......i dh jadi dh....

fatin on May 5, 2011 at 8:47 PM said...

jdi..tq2

dekrakechikk on May 5, 2011 at 11:34 PM said...

Tidak faham sangat lah :(

e r a a RUSBERRY on May 7, 2011 at 4:09 AM said...

cemana ek ?xjadik punn :(

Nurul Aimuni Bahiah Selamat on May 7, 2011 at 8:46 AM said...

ndak faham banyak btul ditulis situ...sapa boleh tolong? :(

nowriz said...

sukses 3x!!!!! best3x!!

queen of pinkalicious on May 9, 2011 at 11:14 PM said...

thanks..

❤✿krOnic a.k.a dayah✿❤ on May 12, 2011 at 1:53 PM said...

erm... masih baru di sini... seriuz xreti... dah wat dah...

Dari dashboard > design > add a gadget( nie yang macam kiter nak tampal gambaQ @ banner 2 kan) > HTML/javascript
biler save lame sangat2...

nokey's on May 20, 2011 at 9:04 PM said...

thanks tunjuk ajar yg sgt bagus, I Likeee

Hamba Allah on May 20, 2011 at 10:55 PM said...

Salam.... thankz..berjaya jga akhirnya....

gulEw cintEw on May 22, 2011 at 2:03 PM said...

..ssah larr naa bwatt
..lmbt plaxx

Legendary Butterfly on May 28, 2011 at 1:05 AM said...

Thanx....cantik nyer

Ain Fadhilah on May 30, 2011 at 5:39 PM said...

thx!!

Liyana Baharudin on June 3, 2011 at 12:46 PM said...

NAPE X BOLEH???

fiza gemork on June 7, 2011 at 6:19 PM said...

grr!!!nape bubble 2 kt head jep..tp ble scroll ke bwh,da ta te bubble..someone plishh help me!!tention dah nie..dari pg td uat bnde nie..

EMMY on June 15, 2011 at 9:49 AM said...

Terima kasih unwanted.
banyak membantu =)

ieka on June 21, 2011 at 8:34 PM said...

thankz..

Anonymous said...

thankz
i like!

miss phea on June 27, 2011 at 12:03 AM said...

temkiu coz ur sharing..sweet!

alifah ilyana on June 30, 2011 at 9:39 PM said...

mcm mne nk tukar warne slain biru ?

Luz Claritta on July 5, 2011 at 1:53 PM said...

sangat-sangat cantik ! amazing ! perfect ! haha . tengz

Ikka on July 7, 2011 at 9:23 PM said...

thanks for sharing.i like it.:)

Cupcake on July 11, 2011 at 2:39 PM said...

lawa sgt! thanks! :D

anamuslimahsejati on July 12, 2011 at 1:07 AM said...

cntekkk sgt... :) tq

Noor Farahim on July 15, 2011 at 2:50 PM said...

thanks :)

Zafiyraz's on July 22, 2011 at 4:46 PM said...

biGG TQQ :)

Bangky on July 25, 2011 at 2:55 PM said...

atenk bawa kayu naik bis.. thank u abiss,

Suriani Nisa on July 25, 2011 at 6:07 PM said...

AWAK BENARKAN AMBIL KANDUNGAN DISINIKAN..SAYA NAK AMBIL NI LETAK KAT BLOG SAYA K..

Cik Tisa on August 5, 2011 at 11:48 PM said...

yes! TQ so much! \^_^/

Fudzla Busyra on August 15, 2011 at 5:04 PM said...

yeay!!!! HAHA

CaRiNa LaLoLa on August 27, 2011 at 1:26 PM said...

x brape faham la..!!

zarakashucaristory on September 17, 2011 at 1:47 PM said...

nape saye buad ta jdi eh ? hmm

puteri_rei@yahoo.com on September 17, 2011 at 9:30 PM said...

wah..canteknyer...tp kecik sgt..memula tue ta prsn..tp...memng bagus..cantekk..

MizCaTz on October 6, 2011 at 11:15 PM said...

waaaa..ty2...suka sngt.... ^^

FaRaH IrYaNi on October 11, 2011 at 2:36 PM said...

wah, jadilah. Thanks a lot :D

Cik FiFi on October 22, 2011 at 11:58 AM said...

dah jadi,cantik sangat..thanks(=

warna-warna hidup on October 23, 2011 at 9:26 PM said...

TQ, chantek sgt2....

badak on October 24, 2011 at 3:18 AM said...

thanz tau. may ALLAH bless u :)

Suara Hati on October 24, 2011 at 11:39 PM said...

menjadi,,,,

Jasni Sangari on October 26, 2011 at 3:15 PM said...

budak2 baru nak belajar....thanks yaaaa

myLIFE on October 26, 2011 at 5:09 PM said...

tk jdi pun.....

Amni Ain on October 26, 2011 at 8:37 PM said...

jadi..:)thanks

mish fafazira on November 3, 2011 at 4:43 PM said...

Best :) THANKS

atieka erfyana on November 4, 2011 at 3:32 PM said...

time kasih...saye da gune...

Hidayah Delilaz on November 5, 2011 at 2:12 PM said...

terima kasih sngat2!

imam sujarwo on November 8, 2011 at 12:58 PM said...

kereeeen....matur tankyu deh.....

Linda Masdan ( D20102040747) on November 15, 2011 at 11:28 AM said...

ada sesiapa boleh ajar macam mana nak buat banner kat blog ? Pllzzzzzzz

Mine ~ on November 23, 2011 at 1:11 PM said...

Thanks :)

Siti Aishah on November 23, 2011 at 5:17 PM said...

Thanks ^^"

imma`s BLOG on November 24, 2011 at 4:01 PM said...

haha bagus

Siti Syafiqa on November 25, 2011 at 9:46 PM said...

TAK JADI PUN :(

Siti Syafiqa on November 25, 2011 at 9:52 PM said...

NAK COPY YANG MANA EH ?
BANYAK SANGAT LAH .

Nursyaza Syafiqah on November 27, 2011 at 10:19 PM said...

style lah . berguna btol

Σzati on November 29, 2011 at 5:20 PM said...

Thanks :)

♥si CUTE PINK ♥ on December 2, 2011 at 5:51 PM said...

awesome :)

Nad + Dhilah on December 3, 2011 at 9:28 AM said...

hey blog ni berguna lah .. thanks to owner blog ni

fifi on December 7, 2011 at 2:18 AM said...

thanks for tutorial ni :)

DEWI AMBARWATI {1A111863} on December 10, 2011 at 1:59 AM said...

Sukses Om
terimakasih

iera on December 23, 2011 at 7:40 PM said...

Awesome..very nice..

hikayat si gadis on December 30, 2011 at 12:20 AM said...

salam ... thanks 4 the tuto :)

QasEhIlya on January 2, 2012 at 3:58 PM said...

thanks .. jd la ,, haha ..

Basok Mohd Pahlawi on January 7, 2012 at 9:37 AM said...

thanks.... memang jadi... terima kasih atas perkongsian ilmu...

nfmatahari on January 14, 2012 at 4:01 PM said...

tq..tq..dah jadi...best nye...tq sekali lagi

Echan on January 14, 2012 at 6:47 PM said...

tengkyu, saye pake yg bubble le...
its so nice ^_^

Ana Mudarrisah on January 17, 2012 at 12:50 AM said...

wahh....menjadi...than q..

ct nur aisyah on January 19, 2012 at 11:27 PM said...

thx..bleh x awk buat utk tutorial buat senarai lgu??

Ainin pizz on January 25, 2012 at 4:15 PM said...

X DER KER TUTIRIOLS UNTUK PENGUNA BLOGSKIN

털이 소유 on February 7, 2012 at 9:58 AM said...

wa ... terima kasih ye??

Wahid H.A.D on February 10, 2012 at 3:12 PM said...

thanks kakak!!
wat bubble cursornya,,,

mrs.sunshine on February 18, 2012 at 1:11 PM said...

dh wat dh , cntik cngt time ksih yew :D . .

Syarni Farida Shukri on February 23, 2012 at 8:59 PM said...

cantiknya!!!
visit my blog
www.mafarsyar.blogspot.com ;)

Shakinah Askyra on March 2, 2012 at 3:56 PM said...

waaa , cntek nya :) hehe

BERMULASEGALANYA on March 3, 2012 at 12:19 PM said...

WWAAAA . BEST ! :)

akulaanaen on March 12, 2012 at 3:03 AM said...

kenapa tak boleh pun ??

lupitha on March 23, 2012 at 12:58 PM said...

Tutorial bublenya bikin blok tambah asyik dipandag....thank's!!

_ashma_ on March 24, 2012 at 12:56 PM said...

thanks panduannya...

leo coolz on March 29, 2012 at 3:57 AM said...

thank's ea dh mw berbagi ilmu..

.::: Princess MOMOY :::. on March 31, 2012 at 6:39 PM said...

salam bro
boleh tunjukkan cara nak hidden widget without tittle yang kita add dari keluar di blog
maksud momoy . bila momoy add widget bubble tu
ada garis di blog yang menunjukkan ada widget (html)

Teknisi Hp, Computer &Jaringan Kota Bakti on April 10, 2012 at 2:44 PM said...

Mantap MAs Bro

Miera on April 13, 2012 at 11:02 AM said...

dah jadi dah .. thankz ..
Follow my blog bplizz ..
http://myrashasha.blogspot.com

wany wahid on April 18, 2012 at 12:21 AM said...

sy x pahammmmmmmmmmmmmmmmmmmmmmmm ! uwarrrr :(

Mohd AX on April 23, 2012 at 2:17 PM said...

wah! thanx menjadi la! :D

Onie gonzalez on May 16, 2012 at 1:31 PM said...

like2/// TQ ADMIN..

shafira rizka amani on June 13, 2012 at 3:54 PM said...

thanks info nya :)

Heril Prayogi on October 9, 2012 at 7:48 AM said...

good info

Puteri Pelangi on October 31, 2012 at 2:00 PM said...

wow..cantek thanks info nya :)

Nursalyn AR on November 10, 2012 at 1:39 PM said...

wah best'y bubble cursor ~ thanks ^^

nur aliah sukeri on November 16, 2012 at 1:22 AM said...

thanks cantik =)

aNiEs rAdZi on December 1, 2012 at 3:40 PM said...

menjadi...skenya hihi :) ten~Q

pusat sepatu spot on December 15, 2012 at 3:27 AM said...

makasi bos bagus deh

Hikayat Dieya on February 22, 2013 at 5:54 PM said...

tq :)

skuva rhegaz on February 24, 2013 at 9:03 PM said...

makasih ..

Thalassa Karadeniz on February 25, 2013 at 8:31 AM said...

Thank you :)

Anonymous said...

Write more, thats all I have to say. Literally,
it seems as though you relied on the video to make your point.
You clearly know what youre talking about, why throw away
your intelligence on just posting videos to your site when you could be giving us something informative to read?



Check out my webpage: raspberry ketone Diet

Anonymous said...

Hi i am kavin, its my first time to commenting anywhere, when i read
this piece of writing i thought i could also make comment due to this sensible post.



Have a look at my blog plus de followers

Tommy Nugroho on March 13, 2013 at 5:30 PM said...

Makasih, saya akan mencoba memakai ini.

Mohammad Amirul on April 20, 2013 at 10:45 PM said...

thx sesgt..:))
memang menarik..
n btw..blog nie mmg faveret aku sbb bnyk tutorial yg super awesome utk buat blog lebih mnarik coz aku pun x reti ssgt ttg setting dlm blog..

Eirieka Alince on April 21, 2013 at 5:14 PM said...

uwaaaahhhhhh!!! menjadi la! hebatnyerrrrrrrrrr..... thank you thank you

Nor :) on May 14, 2013 at 10:57 AM said...

terime kaseh, dah jadik (:
comey sangat ~

Anonymous said...

steroids is the game / body constructing is name of sport .

who wants to play .

My blog post ... six pack shortcuts free download

Anonymous said...

Was carrying out standard bodybuilding routines.
acquired muscle mass, but go no main stability, etc. Since doing athleanx, I'm not like the classic bodybuilders, just mass. I have mass and speed. really like the conditioning routines!!!

Look into my webpage muscle building diet plan on a budget

Anonymous said...

how you can update fb in china.....?i truly want to apdate
it

My weblog - dating tips from my future self wiki

Anonymous said...

I'm a survivor of childhood sexual abuse and this kind of education is precisely what I'd
personally have essential and what my mother and father would have necessary to prevent the suffering I went?

via.

my web site ... 60 Minute stamina free Online

Alinee Emoyy on June 5, 2013 at 11:22 AM said...

tak boleh pun :( help me please :(

Anonymous said...

It is truly a nice and helpful piece of info. I am happy that you
just shared this useful info with us. Please keep us up to date
like this. Thank you for sharing.

Look into my blog; vigrx plus

Anonymous said...

Thank you for the auspicious writeup. It in fact was a
amusement account it. Look advanced to far added agreeable from you!
By the way, how could we communicate?

Also visit my homepage ... basyx chair

Anonymous said...

"packing a 5-inch 1080p screen, giving a PPI of who actually cares"

Here is my webpage premature ejaculation exercise program

Anonymous said...

Hey there! I just wanted to ask if you ever have any issues with hackers?
My last blog (wordpress) was hacked and I ended up losing a few
months of hard work due to no back up. Do you have any methods
to protect against hackers?

Feel free to surf to my web site attraction shadow theater group youtube

Elissa Azhar on June 9, 2013 at 1:43 PM said...

thanks :)

pasang iklan baris tanpa daftar on June 18, 2013 at 6:57 AM said...

oke terima kasih banyak gan

Najwa Asyiqin (Syikin) on July 14, 2013 at 12:44 PM said...

kalau nak warna-warni boleh ke?

Mardiah Diana on November 6, 2013 at 9:13 PM said...

Lawa la..saya pn da cuba dan da dpt pun...tq atas tutorial ni...

Post a Comment

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com Edited by Unwanted