Cursor Jam Animasi

Hallow.. brow, gimana kabar neh? gw harap kalian pada sehat and still creative. ( wuizt.. so' pake bahasa gaulz & britiss, padahal ga' tahu.. :-) he..he.. ). baiklah teman-temanku, kali ini aku mau sharing tentang bagaimana caranya pasang JAM ANALOG yang bisa ngikutin Cursor buat di pasang di blog kamu, kaya punya aku ini.
Langsung ajja yu' kita ke source code-nya...

1. Untuk keamanan silahkan teman-teman download dulu Template teman-teman sebagai jaga-jaga apabila kode tidak bisa dijalankan atau terbapus, teman-teman masih bisa mengUploadnya lagi dengan file template backup yang sudah teman-teman download sebelumnya.

2. Masuk ke rancangan --> EDIT HTML, Copy code berikut dan pastekan sebelum code ]]></b:skin> :

<style type="text/css"><br /><!--<br />/*Do not Alter these. Set for alignment*/<br />.css1{<br />position:absolute;top:0px;left:0px;<br />width:16px;height:16px;<br />font-family:Arial,sans-serif;<br />font-size:16px;<br />text-align:center;<br />font-weight:bold;<br />}<br />.css2{<br />position:absolute;top:0px;left:0px;<br />width:10px;height:10px;<br />font-family:Arial,sans-serif;<br />font-size:10px;<br />text-align:center;<br />}<br />//--><br /></style>

3. Copy code berikut dan paste sebelum code </head> :

<script language="JavaScript"><br /><!-- Mouse Follow Clock from Rainbow Arch --><br /><!-- This script and many more from : --><br /><!-- http://rainbow.arch.scriptmania.com --><br /><br /><!-- Mouse Follow Clock from www.rainbow.arch.scriptmania.com<br />//Hide from older browsers<br />if (document.getElementById&&!document.layers){<br /><br />// *** Clock colours<br />dCol='#00ff00'; //date colour.<br />fCol='#ffffff'; //face colour.<br />sCol='#ffffff'; //seconds colour.<br />mCol='#00ff00'; //minutes colour.<br />hCol='#00ff00'; //hours colour.<br /><br />// *** Controls<br />del=0.6; //Follow mouse speed.<br />ref=40; //Run speed (timeout).<br /><br />// Alter nothing below! Alignments will be lost!<br />var ieType=(typeof window.innerWidth != 'number');<br />var docComp=(document.compatMode);<br />var docMod=(docComp && docComp.indexOf("CSS") != -1);<br />var ieRef=(ieType && docMod)<br />?document.documentElement:document.body;<br />theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");<br />theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");<br />date=new Date();<br />day=date.getDate();<br />year=date.getYear();<br />if (year < 2000) year=year+1900;<br />tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;<br />D=tmpdate.split("");<br />N='3 4 5 6 7 8 9 10 11 12 1 2';<br />N=N.split(" ");<br />F=N.length;<br />H='...';<br />H=H.split("");<br />M='....';<br />M=M.split("");<br />S='.....';<br />S=S.split("");<br />siz=40;<br />eqf=360/F;<br />eqd=360/D.length;<br />han=siz/5.5;<br />ofy=-7;<br />ofx=-3;<br />ofst=70;<br />tmr=null;<br />vis=true;<br />mouseY=0;<br />mouseX=0;<br />dy=new Array();<br />dx=new Array();<br />zy=new Array();<br />zx=new Array();<br />tmps=new Array();<br />tmpm=new Array();<br />tmph=new Array();<br />tmpf=new Array();<br />tmpd=new Array();<br />var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;<br />for (i=0; i < sum; i++){<br />dy[i]=0;<br />dx[i]=0;<br />zy[i]=0;<br />zx[i]=0;<br />}<br /><br />algn=new Array();<br />for (i=0; i < D.length; i++){<br />algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;<br />document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');<br />tmpd[i]=document.getElementById("_date"+i).style;<br />}<br />for (i=0; i < F; i++){<br />document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');<br />tmpf[i]=document.getElementById("_face"+i).style;<br />}<br />for (i=0; i < H.length; i++){<br />document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');<br />tmph[i]=document.getElementById("_hours"+i).style;<br />}<br />for (i=0; i < M.length; i++){<br />document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');<br />tmpm[i]=document.getElementById("_minutes"+i).style;<br />}<br />for (i=0; i < S.length; i++){<br />document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');<br />tmps[i]=document.getElementById("_seconds"+i).style;<br />}<br /><br />function onoff(){<br />if (vis){<br />vis=false;<br />document.getElementById("control").value="Clock On";<br />}<br />else{<br />vis=true;<br />document.getElementById("control").value="Clock Off";<br />Delay();<br />}<br />kill();<br />}<br /><br />function kill(){<br />if (vis)<br />document.onmousemove=mouse;<br />else<br />document.onmousemove=null;<br />}<br /><br />function mouse(e){<br />var msy = (!ieType)?window.pageYOffset:0;<br />if (!e) e = window.event;<br />if (typeof e.pageY == 'number'){<br />mouseY = e.pageY + ofst - msy;<br />mouseX = e.pageX + ofst;<br />}<br />else{<br />mouseY = e.clientY + ofst - msy;<br />mouseX = e.clientX + ofst;<br />}<br />if (!vis) kill();<br />}<br />document.onmousemove=mouse;<br /><br />function winDims(){<br />winH=(ieType)?ieRef.clientHeight:window.innerHeight;<br />winW=(ieType)?ieRef.clientWidth:window.innerWidth;<br />}<br />winDims();<br />window.onresize=new Function("winDims()");<br /><br />function ClockAndAssign(){<br />time = new Date();<br />secs = time.getSeconds();<br />sec = Math.PI * (secs-15) / 30;<br />mins = time.getMinutes();<br />min = Math.PI * (mins-15) / 30;<br />hrs = time.getHours();<br />hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;<br /><br />for (i=0; i < S.length; i++){<br />tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";<br />tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";<br />}<br />for (i=0; i < M.length; i++){<br />tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";<br />tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";<br />}<br />for (i=0; i < H.length; i++){<br />tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";<br />tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";<br />}<br />for (i=0; i < F; i++){<br />tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";<br />tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";<br />}<br />for (i=0; i < D.length; i++){<br />tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";<br />tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";<br />}<br />if (!vis)clearTimeout(tmr);<br />}<br /><br />buffW=(ieType)?80:90;<br />function Delay(){<br />scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;<br />if (!vis){<br />dy[0]=-100;<br />dx[0]=-100;<br />}<br />else{<br />zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);<br />zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);<br />}<br />for (i=1; i < sum; i++){<br />if (!vis){<br />dy[i]=-100;<br />dx[i]=-100;<br />}<br />else{<br />zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);<br />zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);<br />}<br />if (dy[i-1] >= winH-80) dy[i-1]=winH-80;<br />if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;<br />}<br /><br />tmr=setTimeout('Delay()',ref);<br />ClockAndAssign();<br />}<br />window.onload=Delay;<br />}<br />//--><br /></script>

Silahkan untuk dicoba terlebih dahulu dengan klik tombol PRATINJAU. Jika sudah berhasil silahkan lakukan langkah berikutnya.

4. Code berikut sifatnya OPTIONAL, boleh dipakai boleh tidak. Code ini berfungsi sebagai tombol untuk mengaktifkan atau menonaktifkan animasi jam cursor tersebut. Berikut codenya dan copy code berikut terus...., silahkan masuk ke Laman kemudian tambah Gadget baru dan pastekan code berikut disana. (ribet banget seh ngomongnya..., he he..)

<script type="text/javascript"><br /><!-- Mouse Clock Button<br />//Hide from older browsers<br />if (document.getElementById&&!document.layers){<br />document.write('<input type="button" id="control" value="Clock Off" onClick="this.blur();onoff()">');<br />}<br />//--><br /></script>



Selesai dech, silahkan dicoba. bila tidak berhasil, kemungkinan terjadi ketidak cocokkan dalam code-code tersebut dengan template teman-teman. Bila hal ini terjadi silahkan teman-teman lakukan langkah berikut :

Pada halaman tata letak Eleman Laman klik Tambah Gadget HTML/JavaScript kemudian paste code Script di bawah ini kemudian simpan :

<style type="text/css"><br /><!--<br />/*Do not Alter these. Set for alignment*/<br />.css1{<br />position:absolute;top:0px;left:0px;<br />width:16px;height:16px;<br />font-family:Arial,sans-serif;<br />font-size:16px;<br />text-align:center;<br />font-weight:bold;<br />}<br />.css2{<br />position:absolute;top:0px;left:0px;<br />width:10px;height:10px;<br />font-family:Arial,sans-serif;<br />font-size:10px;<br />text-align:center;<br />}<br />//--><br /></style><br /><br /><br /><br /><br /><script language="JavaScript"><br /><!-- Mouse Follow Clock from Rainbow Arch --><br /><!-- This script and many more from : --><br /><!-- http://rainbow.arch.scriptmania.com --><br /><br /><!-- Mouse Follow Clock from www.rainbow.arch.scriptmania.com<br />//Hide from older browsers<br />if (document.getElementById&&!document.layers){<br /><br />// *** Clock colours<br />dCol='#00ff00'; //date colour.<br />fCol='#ffffff'; //face colour.<br />sCol='#ffffff'; //seconds colour.<br />mCol='#00ff00'; //minutes colour.<br />hCol='#00ff00'; //hours colour.<br /><br />// *** Controls<br />del=0.6; //Follow mouse speed.<br />ref=40; //Run speed (timeout).<br /><br />// Alter nothing below! Alignments will be lost!<br />var ieType=(typeof window.innerWidth != 'number');<br />var docComp=(document.compatMode);<br />var docMod=(docComp && docComp.indexOf("CSS") != -1);<br />var ieRef=(ieType && docMod)<br />?document.documentElement:document.body;<br />theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");<br />theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");<br />date=new Date();<br />day=date.getDate();<br />year=date.getYear();<br />if (year < 2000) year=year+1900;<br />tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;<br />D=tmpdate.split("");<br />N='3 4 5 6 7 8 9 10 11 12 1 2';<br />N=N.split(" ");<br />F=N.length;<br />H='...';<br />H=H.split("");<br />M='....';<br />M=M.split("");<br />S='.....';<br />S=S.split("");<br />siz=40;<br />eqf=360/F;<br />eqd=360/D.length;<br />han=siz/5.5;<br />ofy=-7;<br />ofx=-3;<br />ofst=70;<br />tmr=null;<br />vis=true;<br />mouseY=0;<br />mouseX=0;<br />dy=new Array();<br />dx=new Array();<br />zy=new Array();<br />zx=new Array();<br />tmps=new Array();<br />tmpm=new Array();<br />tmph=new Array();<br />tmpf=new Array();<br />tmpd=new Array();<br />var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;<br />for (i=0; i < sum; i++){<br />dy[i]=0;<br />dx[i]=0;<br />zy[i]=0;<br />zx[i]=0;<br />}<br /><br />algn=new Array();<br />for (i=0; i < D.length; i++){<br />algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;<br />document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');<br />tmpd[i]=document.getElementById("_date"+i).style;<br />}<br />for (i=0; i < F; i++){<br />document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');<br />tmpf[i]=document.getElementById("_face"+i).style;<br />}<br />for (i=0; i < H.length; i++){<br />document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');<br />tmph[i]=document.getElementById("_hours"+i).style;<br />}<br />for (i=0; i < M.length; i++){<br />document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');<br />tmpm[i]=document.getElementById("_minutes"+i).style;<br />}<br />for (i=0; i < S.length; i++){<br />document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');<br />tmps[i]=document.getElementById("_seconds"+i).style;<br />}<br /><br />function onoff(){<br />if (vis){<br />vis=false;<br />document.getElementById("control").value="Clock On";<br />}<br />else{<br />vis=true;<br />document.getElementById("control").value="Clock Off";<br />Delay();<br />}<br />kill();<br />}<br /><br />function kill(){<br />if (vis)<br />document.onmousemove=mouse;<br />else<br />document.onmousemove=null;<br />}<br /><br />function mouse(e){<br />var msy = (!ieType)?window.pageYOffset:0;<br />if (!e) e = window.event;<br />if (typeof e.pageY == 'number'){<br />mouseY = e.pageY + ofst - msy;<br />mouseX = e.pageX + ofst;<br />}<br />else{<br />mouseY = e.clientY + ofst - msy;<br />mouseX = e.clientX + ofst;<br />}<br />if (!vis) kill();<br />}<br />document.onmousemove=mouse;<br /><br />function winDims(){<br />winH=(ieType)?ieRef.clientHeight:window.innerHeight;<br />winW=(ieType)?ieRef.clientWidth:window.innerWidth;<br />}<br />winDims();<br />window.onresize=new Function("winDims()");<br /><br />function ClockAndAssign(){<br />time = new Date();<br />secs = time.getSeconds();<br />sec = Math.PI * (secs-15) / 30;<br />mins = time.getMinutes();<br />min = Math.PI * (mins-15) / 30;<br />hrs = time.getHours();<br />hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;<br /><br />for (i=0; i < S.length; i++){<br />tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";<br />tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";<br />}<br />for (i=0; i < M.length; i++){<br />tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";<br />tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";<br />}<br />for (i=0; i < H.length; i++){<br />tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";<br />tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";<br />}<br />for (i=0; i < F; i++){<br />tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";<br />tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";<br />}<br />for (i=0; i < D.length; i++){<br />tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";<br />tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";<br />}<br />if (!vis)clearTimeout(tmr);<br />}<br /><br />buffW=(ieType)?80:90;<br />function Delay(){<br />scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;<br />if (!vis){<br />dy[0]=-100;<br />dx[0]=-100;<br />}<br />else{<br />zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);<br />zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);<br />}<br />for (i=1; i < sum; i++){<br />if (!vis){<br />dy[i]=-100;<br />dx[i]=-100;<br />}<br />else{<br />zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);<br />zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);<br />}<br />if (dy[i-1] >= winH-80) dy[i-1]=winH-80;<br />if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;<br />}<br /><br />tmr=setTimeout('Delay()',ref);<br />ClockAndAssign();<br />}<br />window.onload=Delay;<br />}<br />//--><br /></script>


Mudah bukan, selamat mencoba, sukses selalau. Jangan lupa komentarnya..