CURSOR JAM ANALOG DAN TANGGAL DI BLOGGER

Postingan ini aku buat didasarkan karena kebingungan nyari kalender yang lenyap dari meja, dan harus tanya kesana kemari, untuk mengetahui tanggal yang akan di cantumkan dalam laporan.

Dan ketika browsing aku menemukan cursor yang diikuti oleh analog jam dan kalender, langsung saja aku bikin, dan aku taruh sebagai wallpaper desktop, tetapi dalam postingan ini aku buat untuk tampilan cursos di blog.

Pembuatan kursor ini aku temukan dari web rainbow scriptmania, tetapi kodenya sudah aku modifikasi sesuai dengan keinginan, dan hasilnya bisa dilihat disini.

Proses pembuatannya, copy saja kode css dibawah 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;
}
dan taruh atau pastekan saja kode diatas, tepat diatasnya kode dibawah ini:

]]></b:skin>
Selanjutnya untuk kode javascript, sebelum di copy ke blogger, kode javascript harus di parse terlebih dahulu, caranya copy kode javacript dibawah ini, dan buka web www.blogcrowds.com atau klik saja linknya langsung:

<SCRIPT LANGUAGE="JavaScript">
<!-- http://rainbow.arch.scriptmania.com -->
if (document.getElementById&&!document.layers){

dCol='#00ff00';//warna tanggal.
fCol='#000000';//warna angka jam.
sCol='#00ff00';//warna detik.
mCol='#0066FF';//warna menit.
hCol='#FF3300';//warna Jam.
lCol='#cccccc';//nama blog.

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

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("MINGGU","SENIN","SELASA","RABU","KAMIS","JUM'AT","SABTU");
theMonths=new Array("JANUARI","FEBRUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER");
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("");
K='C C - W W W . K A R S O N O . C O .';
K=K.split(" ");
L=K.length;
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;
eql=360/L;
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();
tmpl=new Array();
tmpd=new Array();
var sum=parseInt(D.length+L+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('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < L; i++){
document.write('<div id="_gue'+i+'" class="css2" style="color:'+lCol+'">'+K[i]+'</div>');
tmpl[i]=document.getElementById("_gue"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');
tmps[i]=document.getElementById("_seconds"+i).style;


}

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[L+D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[L+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[L+D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[L+D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[L+D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[L+D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[L+D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[L+D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[L+i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[L+i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
for (i=0; i < L; i++){
tmpl[i].top=dy[i]+siz*1.9*Math.sin(sec+i*eql*Math.PI/180)+scrollY+"px";
tmpl[i].left=dx[i]+siz*1.9*Math.cos(sec+i*eql*Math.PI/180)+"px";

}
}

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;
}
//-->
</script>
 
Setelah di parse copy hasil parse kode, kemudian taruh atau pastekan, tepat diatasnya kode di bawah ini:

</body>

Sedangkan untuk perubahan, bisa dilihat kode javascript yang berwarna merah, seperti dibawah ini

  
dCol='#00ff00';//warna tanggal.
fCol='#000000';//warna angka jam.
sCol='#00ff00';//warna detik.
mCol='#0066FF';//warna menit.
hCol='#FF3300';//warna Jam.
lCol='#cccccc';//nama blog.
rubah warna sesuai keinginan, kalau ingin melihat kode warna bisa dilihat di postingan Kode Warna HTML.

Selanjutnya pada kode dibawah ini, rubah sesuai nama blog anda


Untuk hasilnya bisa dilihat pada demo disini