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
Black, grays and white are shown in bold red. Primary colors and complements are in BOLD ITALIC.
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
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