Cara Menambahkan Widget Jam Di Blogger

Fighaz Mc, Blogger - Cara Menambahkan Widget Jam Di Blogger. Hallo teman-taman dimana saja kalian berada, selamat pagi, siang, sore dan malam (tergantung jam didaerah kalian saat kalian mengunjungi blog saya ini).

Okey,,,pada kali ini fighazmc.com akan berbagi lagi cara menambahkan Widget Jam Di Blogger. Mungkin teman-teman pernah berkunjung ke beberapa blog lain yang membahas akan hal ini namun tidak berhasil atau alasan lainnya yang membuat kalian untuk mampir ke blog saya ini.

Untuk membuat atau menampilkan jam di blogger atau di dalam tampilan template yang sedang teman-teman gunakan sangatlah mudah. Kita akan membuatnya dengan javascript dan HTML. Yups simak sampai selesai yah.

Apa Itu Jam Dan Manfaatnya

Sebelum membuat atau menampilkan widgets jam di dalam template blog yang kalian gunakan, alangkah baiknya kalian mengetahui apa itu jam dan manfaatnya.

Jam adalah penunjuk waktu. Jam membantu manusia mengetahui waktu sehingga dapat melakukan aktivitasnya secara efektif. Jam menunjukkan waktu secara konsisten dan mudah dibaca misalnya jam 1, jam 2, jam 3, dan seterusnya.

Penggunaan atau menampilkan widgets jam di blog, bagi saya pribadi ini sangatlah penting. Kenapa penting?, yah kalau saya pribadi sih, biar teman-teman yang berkunjung ke blog saya bisa mengetahui jam atau waktu sehingga bisa evektif dalam membaca di blog saya ini (walaupun sebenarnya hanya untuk memperidah blog, heheheh)

Bagaimana Cara Menambahkan Widget Jam Di Blogger?

Sebelum kalian melakukan langkah-langakah dibawah ini, saya akan memberitahu terlebih dahulu keunggulan dari pemasanagan widgets ini seperti:

Tampilan Responsif, Bersih
Cepat Dimuat
Otomatis membaca waktu sesuai dengan tempat anda atau saat anda berkunjung diblog yang menggunakan widgets ini.

Cara Membuat Jam Di Blogger

Hal pertama yang harus kalian lakukan ialah:

Masuk Ke Dasbor (Home) Blogger
Pilih Tata Letak
Pilih Tambahkan Widgets (Bebas mau di atas, tengah, kiri, kanan atau bahawah, Sesuiakan dengan selera kalian)
Pilih HTML/Javascript

Ada 5 Tampilan yang saya berikan disini, silahkan di salin, sesuikan dengan selera kalian yah.

Cara Membuat Jam Di Blogger Dengan Tampilan Jam, Menit, Detik Dan Format Am/Pm

<span id="stm-clockstyle1"></span>
<script type="text/javascript">
//<![CDATA[
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('stm-clockstyle1').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p}function checkTime(i){if (i < 10){i = "0" + i}return i}setInterval(showTime,500);
//]]>
</script>

Demo

Cara Membuat Jam Di Blogger Dengan Tampilan Format Jam, Menit, Am/Pm

<span id="stm-clockstyle2"></span>
<script type="text/javascript">
//<![CDATA[
var a_p = "";var d = new Date();var curr_hour = d.getHours();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}var curr_min = d.getMinutes();curr_min = curr_min + "";if (curr_min.length == 1){curr_min = "0" + curr_min}document.getElementById('stm-clockstyle2').innerHTML=curr_hour + ":" + curr_min + " " + a_p;
//]]>
</script>

Demo

Cara Membuat Jam Di Blogger Dengan Tampilan Format Jam Dan Menit

<span id="stm-clockstyle3"></span>
<script type="text/javascript">
//<![CDATA[
var d = new Date();var curr_hour = d.getHours();var curr_min = d.getMinutes();curr_min = curr_min + "";if (curr_min.length == 1){curr_min = "0" + curr_min}document.getElementById('stm-clockstyle3').innerHTML=curr_hour + ":" + curr_min;
//]]>
</script>

Demo

Cara Membuat Jam Di Blogger Dengan Tampilan Format Hari, Tanggal, Bulan Dan Tahun

<span id="stm-clockstyle4"></span>
<script type='text/javascript'>
//<![CDATA[
var fullbulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];var myDays = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];var tanggal = new Date();var hari = tanggal.getDate();var bulan = tanggal.getMonth();var thisDay = tanggal.getDay(),thisDay = myDays[thisDay];var tahun = tanggal.getYear();var year = (tahun < 1000) ? tahun + 1900:tahun;document.getElementById('stm-clockstyle4').innerHTML=thisDay + ',' + hari + ' ' + fullbulan[bulan] + ' ' + year;
//]]>
</script>

Demo

Cara Membuat Jam Di Blogger Dengan Format Tampilan Tanggal, Bulan Dan Tahun

<span id="stm-clockstyle5"></span>
<script type='text/javascript'>
//<![CDATA[
var fullbulan = ['Januari','Februai','Maret','April','Mei','Juni','Juli','Agustus','Sebtember','Oktober','November','Desember'];var tanggal = new Date();var hari = tanggal.getDate();var bulan = tanggal.getMonth();var tahun = tanggal.getYear();var year = (tahun < 1000) ? tahun + 1900:tahun;document.getElementById('stm-clockstyle5').innerHTML=hari + " " + fullbulan[bulan] + " " + year;
//]]>
</script>

Demo

Setelah salin tampilan mana yang ingin kalian gunakan, tekan simpan dan lihat hasilnya.

Kesimpulan

Untuk membuat atau menampilkan jam di blogger atau di dalam tampilan template yang sedang teman-teman gunakan sangatlah mudah dengan menggunakan javascript dan HTML diatas.

Sekian untuk artikel kali ini tentang Cara Menambahkan Widget Jam Di Blogger, semoga bisa bermanfaat.

Baca Juga artikel lainnya tentang blogger disini

Fighaz Mc Halo!, Saya suka menulis di blog, sebuah ruang pribadi saya untuk berbagi tips, informasi, dan pengetahuan seputar dunia internet dan teknologi. Mari jelajahi dunia digital bersama!