Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial

Cara Membuat Bubble Cursor di Blog

Diposkan oleh Herly Deflin Posting Komentar
Jadikanlah  cursor anda menghasilkan bubbles.







Ikuti tutorial mudah di bawah ini untuk meletakkan 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, silakan ikuti tutorial hingga selesai)





<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 mau mengganti bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

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

 
Ingin mencari kode warna lain.? 




Complete HTML True Color Chart

The background color in each cell is produced by the color code shown.
Black, grays and white are shown in bold red. Primary colors and complements are in BOLD ITALIC.
This site was created by Photius Coutsoukis and it is hosted by ITA. Contact the Webmaster with your comments and suggestions. Printable Version . . . See usage examples below.
Primary/Main/Basic Colors
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF







Secondary/Mixed/Pastel Colors
FF4848 FF68DD FF62B0 FE67EB E469FE
D568FD
9669FE
FF7575 FF79E1 FF73B9 FE67EB E77AFE
D97BFD
A27AFE
FF8A8A FF86E3 FF86C2 FE8BF0 EA8DFE DD88FD AD8BFE
FF9797 FF97E8 FF97CB FE98F1 ED9EFE E29BFD B89AFE
FFA8A8 FFACEC FFA8D3 FEA9F3 EFA9FE E7A9FE C4ABFE
FFBBBB FFACEC FFBBDD FFBBF7 F2BCFE EDBEFE D0BCFE
FFCECE FFC8F2 FFC8E3 FFCAF9 F5CAFF F0CBFE DDCEFF
FFDFDF FFDFF8 FFDFEF FFDBFB F9D9FF F4DCFE E6DBFF
FFECEC FFEEFB FFECF5 FFEEFD FDF2FF FAECFF F1ECFF
FFF2F2 FFFEFB FFF9FC FFF9FE FFFDFF FDF9FF FBF9FF
800080
872187
9A03FE
892EE4
3923D6
2966B8
23819C
BF00BF
BC2EBC
A827FE
9B4EE9
6755E3
2F74D0
2897B7
DB00DB
D54FD5
B445FE
A55FEB
8678E9
4985D6
2FAACE
F900F9
DD75DD
BD5CFE
AE70ED
9588EC
6094DB
44B4D5
FF4AFF DD75DD C269FE
AE70ED
 A095EE 7BA7E1 57BCD9
FF86FF E697E6 CD85FE C79BF2 B0A7F1 8EB4E6 7BCAE1
FFA4FF EAA6EA D698FE CEA8F4 BCB4F3 A9C5EB 8CD1E6
FFBBFF EEBBEE DFB0FF DBBFF7 CBC5F5 BAD0EF A5DBEB
FFCEFF F0C4F0 E8C6FF E1CAF9 D7D1F8 CEDEF4 B8E2EF
FFDFFF F4D2F4 EFD7FF EDDFFB E3E0FA E0EAF8 C9EAF3
FFECFF F4D2F4 F9EEFF F5EEFD EFEDFC EAF1FB DBF0F7
FFF9FF FDF9FD FEFDFF FEFDFF F7F5FE F8FBFE EAF7FB
5757FF
62A9FF
 62D0FF 06DCFB 01FCEF 03EBA6 01F33E
6A6AFF
75B4FF
 75D6FF 24E0FB 1FFEF3 03F3AB 0AFE47
7979FF
 86BCFF 8ADCFF 3DE4FC 5FFEF7 33FDC0 4BFE78
8C8CFF 99C7FF 99E0FF 63E9FC 74FEF8 62FDCE 72FE95
9999FF 99C7FF A8E4FF 75ECFD 92FEF9 7DFDD7 8BFEA8
AAAAFF A8CFFF BBEBFF 8CEFFD A5FEFA 8FFEDD A3FEBA
BBBBFF BBDAFF CEF0FF ACF3FD B5FFFC A5FEE3 B5FFC8
CACAFF D0E6FF D9F3FF C0F7FE CEFFFD BEFEEB CAFFD8
E1E1FF DBEBFF ECFAFF C0F7FE E1FFFE BDFFEA EAFFEF
EEEEFF ECF4FF F9FDFF E6FCFF F2FFFE CFFEF0 EAFFEF
F9F9FF F9FCFF FDFEFF F9FEFF FDFFFF F7FFFD F9FFFB
1FCB4A 59955C 48FB0D 2DC800 59DF00 9D9D00 B6BA18
27DE55 6CA870 79FC4E 32DF00 61F200 C8C800 CDD11B
4AE371 80B584 89FC63 36F200 66FF00 DFDF00 DFE32D
7CEB98 93BF96 99FD77 52FF20 95FF4F FFFFAA EDEF85
93EEAA A6CAA9 AAFD8E 6FFF44 ABFF73 FFFF84 EEF093
A4F0B7 B4D1B6 BAFEA3 8FFF6F C0FF97 FFFF99 F2F4B3
BDF4CB C9DECB CAFEB8 A5FF8A D1FFB3 FFFFB5 F5F7C4
D6F8DE DBEADC DDFED1 B3FF99 DFFFCA FFFFC8 F7F9D0
E3FBE9 E9F1EA EAFEE2 D2FFC4 E8FFD9 FFFFD7 FAFBDF
E3FBE9 F3F8F4 F1FEED E7FFDF F2FFEA FFFFE3 FCFCE9
FAFEFB FBFDFB FDFFFD F5FFF2 FAFFF7 FFFFFD FDFDF0
BABA21 C8B400 DFA800 DB9900 FFB428 FF9331 FF800D
E0E04E D9C400 F9BB00 EAA400 FFBF48 FFA04A FF9C42
E6E671 E6CE00 FFCB2F FFB60B FFC65B FFAB60 FFAC62
EAEA8A F7DE00 FFD34F FFBE28 FFCE73 FFBB7D FFBD82
EEEEA2 FFE920 FFDD75 FFC848 FFD586 FFC48E FFC895
F1F1B1 FFF06A FFE699 FFD062 FFDEA2 FFCFA4 FFCEA2
F4F4BF FFF284 FFECB0 FFE099 FFE6B5 FFD9B7 FFD7B3
F7F7CE FFF7B7 FFF1C6 FFEAB7 FFEAC4 FFE1C6 FFE2C8
F9F9DD FFF9CE FFF5D7 FFF2D2 FFF2D9 FFEBD9 FFE6D0
FBFBE8 FFFBDF FFFAEA FFF9EA FFF7E6 FFF4EA FFF1E6
FEFEFA FFFEF7 FFFDF7 FFFDF9 FFFDF9 FFFEFD FFF9F4
D1D17A C0A545
C27E3A
C47557
B05F3C
C17753
B96F6F
D7D78A CEB86C C98A4B
CB876D
C06A45
C98767
 C48484
DBDB97 D6C485 D19C67 D29680
C87C5B
D0977B
 C88E8E
E1E1A8 DECF9C DAAF85 DAA794 CF8D72 DAAC96 D1A0A0
E9E9BE E3D6AA DDB791 DFB4A4 D69E87 E0BBA9 D7ACAC
EEEECE EADFBF E4C6A7 E6C5B9 DEB19E E8CCBF DDB9B9
E9E9C0 EDE4C9 E9D0B6 EBD0C7 E4C0B1 ECD5CA E6CCCC
EEEECE EFE7CF EEDCC8 F0DCD5 EACDC1 F0DDD5 ECD9D9
F1F1D6 F5EFE0 F2E4D5 F5E7E2 F0DDD5 F5E8E2 F3E7E7
F5F5E2 F9F5EC F9F3EC F9EFEC F5E8E2 FAF2EF F8F1F1
FDFDF9 FDFCF9 FCF9F5 FDFAF9 FDFAF9 FCF7F5 FDFBFB
F70000
B9264F
990099
74138C
0000CE
1F88A7
4A9586
FF2626
D73E68
B300B3
8D18AB
5B5BFF"
25A0C5
 5EAE9E
FF5353 DD597D CA00CA
A41CC6
7373FF
 29AFD6 74BAAC
FF7373 E37795 D900D9 BA21E0 8282FF 4FBDDD 8DC7BB
FF8E8E E994AB FF2DFF CB59E8 9191FF 67C7E2 A5D3CA
FFA4A4 EDA9BC F206FF CB59E8 A8A8FF 8ED6EA C0E0DA
FFB5B5 F0B9C8 FF7DFF D881ED B7B7FF A6DEEE CFE7E2
FFC8C8 F4CAD6 FFA8FF EFCDF8 C6C6FF C0E7F3 DCEDEA
FFEAEA F8DAE2 FFC4FF EFCDF8 DBDBFF D8F0F8 E7F3F1
FFEAEA FAE7EC FFE3FF F8E9FC EEEEFF EFF9FC F2F9F8
FFFDFD FEFAFB FFFDFF FFFFFF FDFDFF FAFDFE F7FBFA

USAGE EXAMPLES:
<body bgcolor="#003300">
<font color="#330066">
Vlasishost.com | Html Font Colors
HTML History, PHP History, PHP Programming, PHP Basics, HTML Code

Thank you for making this an award winning site

Please put this page in your BOOKMARKS - - - - -


Telefoneintrage
Canada Work Permit.

All Language Translations




ITA Home Page
 The IMMIGRATION Superhighway Feedback
ITA WWWDesign J.D.Quad's HTML Page Yahoo search

Copyright © 1998-2006 Photius Coutsoukis
HTML Colors; Table of color codes for html documents HTML Colors; Table of color codes for html documents HTML Colors; Table of color codes for html documents

Posting Komentar untuk "Cara Membuat Bubble Cursor di Blog"