Catetan

CURSOR JAM ANALOG DAN TANGGAL DI BLOGGER 6


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


K='C C - W W W . K A R S O N O . C O .';


Untuk hasilnya bisa dilihat pada demo disini

6 comments:

Seno Ari Sandi

12 Jan 2011 16.26.00
gan, kok gx bisa gerak ya tulisannya??? masalahnya dimana ni?
SMK TI PRATAMA

2 Apr 2011 10.31.00
keren nih thanks
Keong Balap

24 Mei 2011 11.39.00
mas, follow balik dong
nama blog saya putra, atau www.gratiskeong.co.cc
Alex

3 Jun 2011 10.05.00
ka', mohon tutorial nya dunk, buat bisa di pasang di desktop/set sebagai wallpaper desktop.. terimakasih
Karsono

3 Jun 2011 21.33.00
untuk jadi wallpaper, coba bikin html yang isinya kode jam diatas, kemudian change wallpaper jadi desktop... gitu
Oleh Iwan Kurniawan

16 Mar 2012 00.44.00
hahahahaha....

Nama karsono nya masih laku tah?
jual aja sih ganti sama Anjasmara...

hahahah.... kiddding gaaan, ngakak sumpah

#Ananonim

Posting Komentar