Cara Membuat Jam di Blog Dengan Mudah

By . Kategori: blog Tags: ,

irnanto.com – Cara membuat jam yang akan saya jelaskan kali ini adalah cara membuat jam di blog atau wabsite dan bukan cara membuat jam tangan, jam dinding ataupun jam gadang. Bagaimana cara membuat jam tangan di website ?. Cukup mudah, Anda hanya cukup menuliskan/mengetikkan source code membuat dan menampilkan jam di blog pada blog kalian.

Script membuat jam di blog

Script membuat jam ini dapat Anda implementasikan di blog worpress, blog blogger, website dan blog lainnya. Karena script membuat jam di bawah ini universal atau dapat digunakan di web atau blog yang berjalan menggunakan browser yang javascriptnya aktif. Saya rasa saat ini tidak ada web yang tidak menggunakan javascript, hampir semua web menggunakannya dan di setiap browser pasti telah di set javascript-nya aktif. Ketikkan kode javascript di bawah ini pada widget text/javascript di blog blogger atau blogspot, atau ketikkan di widget teks pada blog wordpress.

<span id=”liveclock”></span>

<script language=”JavaScript”>
    function showclock(){
        if(!document.layers && !document.all && !document.getElementById)
            return

        var Digital=new Date();
        var hours=Digital.getHours();
        var minutes=Digital.getMinutes();
        var seconds=Digital.getSeconds();

        var dn=”PM”;
        if(hours<12)
            dn=”AM”;
        if(hours>12)
            hours=hours-12;
        if(hours==0)
            hours=12;

        if (minutes<=9)
            minutes=”0″+minutes;
        if (seconds<=9)
            seconds=”0″+seconds;

        myclock=”<b>Waktu sekarang:</br>” + hours + “:” + minutes + “:” + seconds + ” ” + dn + “</b>”;

        if (document.layers){
            document.layers.liveclock.document.write(myclock);
            document.layers.liveclock.document.close();
        }else if(document.all){
            liveclock.innerHTML=myclock;
        }else if (document.getElementById){
            document.getElementById(“liveclock”).innerHTML=myclock;
        }
        setTimeout(“showclock()”,1000);
    }
    window.onload=showclock;
</script>

Maksud dan arti dari kode javascript membuat jam di atas adalah :

  • Membuat elemen penampung penampilan jam dengan id=”liveclock”
  • Membuat kode javascript dengan salah satu fungsi showclock()
  • Membuat kondisi jika dukumen layers dan semua dukumen dan pengambilan dukumen berupa ID tidak ada maka return (kembali)
  • Membuat variabel Digital untuk menampung class Date() yang fungsinya menampung hari saat ini.
  • Membuat variabel hour untuk menampung pengambilan jam saat ini pada variabel Digital.
  • Membuat variabel minutes untuk menampung pengambilan menit saat ini pada variabel Digital.
  • Membuat variabel seconds untuk menampung pengambilan detik  saat ini pada variabel Digital.
  • Membuat variabel dn untuk menentukan rentang waktu. AM dan PM adalah format waktu yang digunakan untuk membedakan siang dan malam dalam satu hari. Format ini biasanya digunakan di Amerika dan Eropa. Arti AM dan PM pada jam adalah sebagai berikut :
    AM singkatan dari Ante merediem artinya before noon atau sebelum tengah hari. 
    PM singkatan dari post merediem artinya after noon atau  setelah tengah hari.
    Jadi yang menjadi patokan adalah AM dimulai dari jam 00:00:00 – 11:59:59 dan PM dimulai dari jam 12:00:00 – 11:59:59
  • Membuat kondisi untuk menentukan AM dan PM. Jika jam kurang dari 12 maka variabel dn di set AM.
  • Membuat kondisi jika jam lebih besar dari jam 12 maka jam dikurangi 12 dan disimpan di variabel hours.
  • Membuat kondisi jika jam sama dengan 0 maka set variabel hours menjadi 12.
  • Membuat kondisi untuk menambahkan karakter angka “0” di depan menit/variabel minutes jika menit kurang dari sama dengan 9.
  • Membuat kondisi untuk menambahkan karakter angka “0” di depan detik/variabel seconds jika detik kurang dari sama dengan 9.
  • Membuat variabel myclock untuk menampung string yang akan menampilkan jam, menit, detik dan kode rentang waktu.
  • Membuat kondisi jika dokumen layers ditemukan atau true, maka mengambil dokumen layer liveclock dan menuliskan isi dari variabel myclock. 
  • Menutup dokumen layer liveclock.
  • Selain itu jika kondisi semua dukumen ditemukan maka isikan di dalam tag inisial liveclock dengan isi dari variabel myclock
  • Selain itu jika kondisi mengambil dokumen berdasarkan id atau id dalam dukumen html ditemukan maka akan mengisikan isi variabel myclock dalam tag yang elemennya terdapat ID liveclock.
  • Mengeset waktu untuk memanggil fungsi showclock() setiap 1 detik.
  • Menjalankan fungsi showclock pada saat halaman window pertama kali di load.
Contoh Tampilan Jam di Blog atau Web

Contoh Tampilan Jam di Blog atau Web

Gambar di atas adalah contoh hasil dari menampilkan jam di web. Anda dapat berkreasi dengan CSS agar dapat memperindah tampilannya

Bagaimana ? mudah kan. Saya harap penjelasan saya mengenai Source Code cara membuat jam pada blog dapat Anda pahami. Jika ada pertanyaan lebih, silahkan berkomentar di form di bawah ini. Cukup sekian pembahasan Cara Membuat Jam di Blog Dengan Mudah, semoga bermanfaat, Aamiin.

Belum ada komentar untuk “Cara Membuat Jam di Blog Dengan Mudah”

Tinggalkan Komentar