Cara Memasang Widget Jam di Blogger atau Wordpress

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024

Hi web developer! kembali lagi bersama dengan guru design, kali ini guru design akan berbagi tutorial cara membuat widget jam di blog atau wordpress. Pernahkah kamu melihat blog orang lain menampilkan waktu atau jam? jika benar maka itu lah yang akan kita buat sekarang ini, untuk membuat widget jam di blogger atau wordpress caranya sangat mudah, kita hanya menggunakan HTML dan JavaScript, baiklah kita mulai saja tutorial cara membuat widget jam di blogger atau wordpress. 

Cara Memasang Widget Jam di Blogger atau Wordpress

Cara Memasang Widget Jam di Blogger atau Wordpress

Jam yang akan kita buat memiliki 5 gaya, silahkan kamu pilih sendiri gaya widget jam yang mana yang kira-kira cocok dengan blog kamu.

  1. Pilih Menu Tema
  2. Pilih Edit HTML
  3. Cari kode body penutup seperti ini </body> kemudian copy dan paste-kan JavaScript tepat diatasnya
  4. Copy dan paste selektor id letaknya sesuai dengan keinginan kamu

Contoh, disini saya akan menggunakan selektor id  clockstyle1 berarti penulisannya seperti ini:

Saya akan datang jam <span id="clockstyle1"></span> untuk rapat. 

  • Demo: Saya akan datang jam untuk rapat.

Apakah sekarang jam <span id="clockstyle2"></span> bro?

  • Demo: Apakah sekarang jam bro?

 

Dengan Format Jam Menit Detik dan AM/PM

<span id="clockstyle1"></span>
<script type="text/javascript">
<!--
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('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>

 

Dengan Format Jam Menit dan AM/PM 

<span id="clockstyle2"></span>
<script type="text/javascript">
<!--
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('clockstyle2').innerHTML=curr_hour + ":" + curr_min + " " + a_p;
//-->
</script>


Dengan Format Jam dan Menit 

<span id="clockstyle3"></span>
<script type="text/javascript">
<!--
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('clockstyle3').innerHTML=curr_hour + ":" + curr_min;
//-->
</script>

 

Dengan Format Hari Tanggal Bulan dan Tahun 

<span id="clockstyle4"></span>
<script type='text/javascript'>
<!--
var fullbulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];var myDays = ['Minggu','Senin','Selasa','Rabu','Kamis','Jum&#39;at','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('clockstyle4').innerHTML=thisDay + ',' + hari + ' ' + fullbulan[bulan] + ' ' + year;
//-->
</script>

 

Dengan Format tanggal bulan dan tahun 

<span id="clockstyle5"></span>
<script type='text/javascript'>
<!--
var fullbulan = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','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('clockstyle5').innerHTML=hari + " " + fullbulan[bulan] + " " + year;

//-->
</script>


Sekian tutorial cara memasang widget jam di blogger atau wordpress semoga bermanfaat, terimakasih.


Rafiqi, S.Kom.