Membuat Jam Digital pada Blog versi BlognaFaro

Seperti yang anda lihat di pojok kanan atas blog ini, ada jam digital yang rapi, formatnya juga bagus untuk blog berbahasa Indonesia, nah faro akan berbagi cara membuat jam digital di blog seperti blognafaro.

Untuk kode Javascript dibawah ini, letakkan sebelum </body> pada template anda, meletakkan javascript seperti itu tujuannya agar tampilnya konten blog tidak perlu menunggu javascript diparsing dulu.

Berikut kodenya :

<script type='text/javascript'>
//<![CDATA[
function showdate(){
var months=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];var myDays=['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
var date=new Date();var day=date.getDate();var month=date.getMonth();
var thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();
var year=(yy<1000)?yy+1900:yy;
document.getElementById('tanggalnya').innerHTML=thisDay+", "+day+" "+months[month]+" "+year;}showdate();
function showtime(){
var a_p="";var today=new Date();var curr_hour=today.getHours();var curr_minute=today.getMinutes();var curr_second=today.getSeconds();
if(curr_hour<12){a_p="AM";}else{a_p="PM";}if(curr_hour==0){curr_hour=12;}if(curr_hour>12){curr_hour=curr_hour-12;}curr_hour=checkTime(curr_hour);curr_minute=checkTime(curr_minute);curr_second=checkTime(curr_second);document.getElementById('jamnya').innerHTML=curr_hour+":"+curr_minute+":"+curr_second+" "+a_p;;}
function checkTime(i){if(i<10){i="0"+i;}return i;}
setInterval(showtime,500);
//]]></script>

Setelah memasukkan javacript kini tinggal inisialisasi tempat tanggal dan jam.

kodenya seperti berikut :

<span id='tanggalnya'/> | <span id='jamnya'/>

Live preview : |

Nah misalkan anda ingin memasang jam tersebut di navigasi sebelah kanan (seperti di blog ini), dengan asumsi anda telah mengetahui letak pengaturan navigasi blog anda. tambahkan sebuah div di kode tersebut, kira-kira menjadi seperti ini :

<div style='float:right'><span id='tanggalnya'/> | <span id='jamnya'/></div>

Lalu masukkan kode tersebut ke navigasi template anda, biasanya sebelum tag </nav> .

pada kode diatas, text berwarna ungu bisa anda ganti dengan left jika ingin tampil di sebelah kiri navigasi.

Semoga bermanfaat.

Post link : http://www.blognafaro.com/2013/12/membuat-jam-digital-pada-blog-versi-blognafaro.html