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

140 comments:

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

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

    ReplyDelete
  3. kalau wordpress xde ke???

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

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

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

    ReplyDelete
  7. thnx! chantek sgt3!
    suke sangat!
    =D

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

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

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

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

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

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

    ReplyDelete
  14. thankz......i dh jadi dh....

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

    ReplyDelete
  16. sukses 3x!!!!! best3x!!

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

    ReplyDelete
  18. thanks tunjuk ajar yg sgt bagus, I Likeee

    ReplyDelete
  19. Salam.... thankz..berjaya jga akhirnya....

    ReplyDelete
  20. ..ssah larr naa bwatt
    ..lmbt plaxx

    ReplyDelete
  21. NAPE X BOLEH???

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

    ReplyDelete
  23. Terima kasih unwanted.
    banyak membantu =)

    ReplyDelete
  24. mcm mne nk tukar warne slain biru ?

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

    ReplyDelete
  26. thanks for sharing.i like it.:)

    ReplyDelete
  27. atenk bawa kayu naik bis.. thank u abiss,

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

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

    ReplyDelete
  30. dah jadi,cantik sangat..thanks(=

    ReplyDelete
  31. thanz tau. may ALLAH bless u :)

    ReplyDelete
  32. budak2 baru nak belajar....thanks yaaaa

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

    ReplyDelete
  34. NAK COPY YANG MANA EH ?
    BANYAK SANGAT LAH .

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

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

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

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

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

    ReplyDelete
  40. X DER KER TUTIRIOLS UNTUK PENGUNA BLOGSKIN

    ReplyDelete
  41. thanks kakak!!
    wat bubble cursornya,,,

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

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

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

    ReplyDelete
  45. thank's ea dh mw berbagi ilmu..

    ReplyDelete
  46. 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)

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

    ReplyDelete
  48. sy x pahammmmmmmmmmmmmmmmmmmmmmmm ! uwarrrr :(

    ReplyDelete
  49. wah best'y bubble cursor ~ thanks ^^

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

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

    ReplyDelete
  52. Makasih, saya akan mencoba memakai ini.

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

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

    ReplyDelete
  55. terime kaseh, dah jadik (:
    comey sangat ~

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

    who wants to play .

    My blog post ... six pack shortcuts free download

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

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

    My weblog - dating tips from my future self wiki

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

    ReplyDelete
  60. tak boleh pun :( help me please :(

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

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

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

    Here is my webpage premature ejaculation exercise program

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

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

    ReplyDelete
  66. menjadi laa .. :) terima kasih . alang alang nak tanya , kalo nak letak deekat blog title tu , nak letak gambar kite skali , cane erk ??

    ReplyDelete
  67. Sis.. boleh saya apa fungsi blog button?

    ReplyDelete