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.
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
Selamat Mencuba.:)
0 comments:
Post a Comment