Hemmm...
Saya pengen bagi-bagi ilmu bagus ne...
Tips ini lanjutan dari Cara Membuat Cursor Selalu Diikuti Oleh Text ..
Tapi kali ini yang berbeda, kursornya tidak di ikuti teks tetapi di ikuti oleh jam..
unik kan.. kalau anda tertarik silahkan ikuti langkah-langkah berikut..
1. Login Ke blogger kalian
2. Masuk ke rancangan --> EDIT HTML
3. Simpan script berikut diatas kode ]]></b:skin>
/*-- CSS Kursor Diikuti Jam --*/
.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}
.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;
}
/*-- END CSS --*/
4. kemudian cari lagi kode </body>
5. Simpan script berikut diatas kode </body> :
<script type='text/javascript'> //<![CDATA[ if (document.getElementById&&!document.layers){dCol='blue'; fCol='green'; sCol='blue'; mCol='red'; hCol='red'; del=0.7; ref=70;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","RABO","KAMIS","JUM'AT","SABTU");theMonths=new Array("JANUARI","FEBUARI","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(""); N='3 9 12'; 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('<div id="_date'+i+'" class="cursor_jam2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'<\/div>');tmpd[i]=document.getElementById("_date"+i).style;} for (i=0; i < F; i++){ document.write('<div id="_face'+i+'" class="cursor_jam2" 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="cursor_jam1" 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="cursor_jam1" 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="cursor_jam1" style="color:'+sCol+'">'+S[i]+'<\/div>'); tmps[i]=document.getElementById("_seconds"+i).style;} function onoff(){if (vis){ vis=false; document.getElementById("control").value="Tampilkan Jam";} else{ vis=true;document.getElementById("control").value="Sembunyikan Jam";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;} //]]> </script>
6. Simpan Template nya..
Keterangan : teks yang berwarna merah bisa anda ganti sesuai keinginan anda..
nah, selesai.. gampang-gampang susah ya.. ^_^
coba lihat hasilnya, semoga bermanfaat..
Saya pengen bagi-bagi ilmu bagus ne...
Tips ini lanjutan dari Cara Membuat Cursor Selalu Diikuti Oleh Text ..
Tapi kali ini yang berbeda, kursornya tidak di ikuti teks tetapi di ikuti oleh jam..
unik kan.. kalau anda tertarik silahkan ikuti langkah-langkah berikut..
1. Login Ke blogger kalian
2. Masuk ke rancangan --> EDIT HTML
3. Simpan script berikut diatas kode ]]></b:skin>
/*-- CSS Kursor Diikuti Jam --*/
.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}
.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;
}
/*-- END CSS --*/
4. kemudian cari lagi kode </body>
5. Simpan script berikut diatas kode </body> :
<script type='text/javascript'> //<![CDATA[ if (document.getElementById&&!document.layers){dCol='blue'; fCol='green'; sCol='blue'; mCol='red'; hCol='red'; del=0.7; ref=70;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","RABO","KAMIS","JUM'AT","SABTU");theMonths=new Array("JANUARI","FEBUARI","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(""); N='3 9 12'; 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('<div id="_date'+i+'" class="cursor_jam2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'<\/div>');tmpd[i]=document.getElementById("_date"+i).style;} for (i=0; i < F; i++){ document.write('<div id="_face'+i+'" class="cursor_jam2" 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="cursor_jam1" 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="cursor_jam1" 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="cursor_jam1" style="color:'+sCol+'">'+S[i]+'<\/div>'); tmps[i]=document.getElementById("_seconds"+i).style;} function onoff(){if (vis){ vis=false; document.getElementById("control").value="Tampilkan Jam";} else{ vis=true;document.getElementById("control").value="Sembunyikan Jam";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;} //]]> </script>
6. Simpan Template nya..
Keterangan : teks yang berwarna merah bisa anda ganti sesuai keinginan anda..
nah, selesai.. gampang-gampang susah ya.. ^_^
coba lihat hasilnya, semoga bermanfaat..
0 komentar:
Posting Komentar