MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

Cara Membuat Jam Mengikuti Cursor


Hai Sobat! Jumpa lagi dengan saya. Di postingan yang
lalu saya telah membahas mengenai cara membuat teks
yang mengikuti cursor. Pada Kesempatan kali ini saya
akan membahas lebih lanjut tentang cara membuat jam
mengikuti cursor. Langkahnya sama saja dengan cara
membuat teks yang mengikuti cursor namun hanya kode
scriptnya saja yang berbeda. Tanpa buang waktu,
berikut ini adalah caranya. Sekedar untuk mengingatkan
anda maka akan saya mulai dari tahap pertama.

1. Pada layar Dasbor, anda pilih Rancangan

2. Tambah Gadget dan pilih HTML/JavaScript

3. Script di bawah ini masukkan ke dalam kontennya.

  • Copy-paste kode script ini :
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}

//-->syamsudinnamaku.blogspot.com

//Hide from older browsers
if (document.getElementById&&!document.layers){

// *** Clock colours
dCol='#000000'; //date colour.
fCol='#ff00ff'; //face colour.
sCol='#0000ff'; //seconds colour.
mCol='#9000ff'; //minutes colour.
hCol='#F37021'; //hours colour.

// *** Controls
del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).

// Alter nothing below! Alignments will be lost!
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year; D=tmpdate.split(""); N='3 4 5 6 7 8 9 10 11 12 1 2'; N=N.split(" "); F=N.length; H='...'; H=H.split(""); M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array(); zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1; for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0; } algn=new Array(); for (i=0; i < D.length; i++){ algn[i]=(parseInt(D[i]) || D[i]==0)?10:9; document.write('
'+D[i]+'
');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){ document.write('
'+N[i]+'
');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){ document.write('
'+H[i]+'
');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){ document.write('
'+M[i]+'
');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){ document.write('
'+S[i]+'
');
tmps[i]=document.getElementById("_seconds"+i).style;
}

function onoff(){
if (vis){
vis=false;
document.getElementById("control").value="Clock On";
}
else{
vis=true;
document.getElementById("control").value="Clock Off";
Delay();
}
kill();
}

function kill(){
if (vis)
document.onmousemove=mouse;
else
document.onmousemove=null;
}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){ tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < H.length; i++){ tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < F; i++){ tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < D.length; i++){ tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px"; } if (!vis)clearTimeout(tmr); } buffW=(ieType)?80:90; function Delay(){ scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset; if (!vis){ dy[0]=-100; dx[0]=-100; } else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del); zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del); } for (i=1; i < sum; i++){ if (!vis){ dy[i]=-100; dx[i]=-100; } else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del); zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del); } if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->


CATATAN :

* Yang perlu anda edit ada pada bagian di bawah ini,
   (kode script yang berwarna merah) untuk merubah
   warna yang sesuai selera anda.

'#000000'; //date colour.
'#ff00ff'; //face colour.
'#0000ff'; //seconds colour.
'#9000ff'; //minutes colour.
'#F37021'; //hours colour.


4. Bila anda sesuai mengikuti langkah seperti yang saya
    uraikan di atas,maka hasilnya akan nampak seperti
    gambar illustrasi di bawah ini :



5. Selamat mecoba
    dan semoga berhasil
    Good Luck ...................
    Silahkan komentarnya.


8 comments:

KHOIRUL HANAFI mengatakan...

wah wha q xoba kg ga' bisa 2 heheheh

Masjid Jami' Asaasul Islamiyah mengatakan...

ga bs om ggagagag

Sauqi mengatakan...

ga jalan !!!

Muhammad Yahya mengatakan...

gak bisa

Unknown mengatakan...

wawa mengatakan boongin nie ...

all masuk ke blogg saya kalo mau nonton tv ....

www.irpannakbekasi.blogspot.com

Unknown mengatakan...

ga bisa om....ginana nih ga lengkap kali...hii....hiiii

ulangan mengatakan...

payaaaaah semua tutorialnya palsuuuu,,,,,,,,,,,,,,,,,, haahaaa

El_Maja Comunity mengatakan...

Gagal nieh....

Posting Komentar