Minggu, 30 Maret 2014

Membuat Jam Digital Keren Dengan Javascript

Membuat Jam Digital Keren Dengan JavascriptMembuat Jam Digital Keren Dengan Javascript - Seperti yang anda lihat di pojok kanan atas blog ini, ada jam digital yang rapi, formatnya juga bagus untuk blog berbahasa Indonesia, nah saya akan berbagi cara membuat jam digital di blog seperti Ridwan Hex Blog.
Tutorialnya pun sangat mudah sekali dan Jam Digital di blog ini tidak terlalu berat dipakai.
Jika anda tertarik untuk memakai jamnya langsung aja.


Screenshoot.


Membuat Jam Digital Keren Dengan Javascript

Tuorialnya :

  • Pertama yang pasti masuk blogger.com dan buka blog anda.
  • Buka tab Template > Edit html.
  • Cari </body> (Dengan Cara Ctrl+F) dan simpan Diatas </body> tadi, Javascript Dibawah ini.
<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 untuk tanggal dan jam. kodenya seperti berikut :
<span id='tanggalnya'/> | <span id='jamnya'/> 

Catatan jika 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 dibawah.

<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.

12 komentar:

  1. diblog ane udah ada kang ridwan tapi mungkin bermanfaat buat yang laen :D

    BalasHapus
  2. wah mantap, izin nyimak dulu gan, soalnya masih gak ada tempat buat naroh jamnya :d

    BalasHapus
  3. makasih gan tutorialnya :) saya praktekin dulu :D

    BalasHapus
  4. Keren. Saya cobain di blog saya deh :D

    BalasHapus
  5. om ridwan maaf diluar topik, saya request cara membuat threat comment kayak blog ini :D

    BalasHapus