Cara Membuat Waktu Hitung Mundur (Countdown Timer) di Blog

Countdown timer atau Waktu Hitung Mundur biasanya digunakan untuk memberikan informasi waktu sebuah kegiatan atau event kegiatan yang akan dilaksanakan seperti hari ulang tahun, pemilihan umum, pemilihan kepala daerah atau event/kegiatan lainnya.

Cara Memasang Hari, Tanggal dan Jam di Blog :

1. Masuk ke Dashbor Blog
2. Klik "Tata Letak"
3. Klik "Tambahkan Gadget"
4. Klik "HTML/JavaScript"
5. Masukan kode yang ada di bawah (silahkan pilih kode sesuai keinginan)

Kode Untuk Menampilkan Waktu Hitung Mundur

<style scoped="scoped" type="text/css">
#countdownbaladaka {background:black;color:yellow;font-family:Trebuchet MS, sans-serif;font-size:13px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
.teks {color:white}
.teks-event {color:DarkOrange; font-size:21px}
.tanggal-event {color:Cyan}
</style>
<div id="countdownbaladaka">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Juni 26, 2021").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);

// format countdown string + set tag value
  countdown.innerHTML = days + " <span class='teks'>hari</span> " + hours + " <span class='teks'>jam</span> "
  + minutes + " <span class='teks'>menit</span> " + seconds + " <span class='teks'>detik <br/>Menuju Tahun Baru Hijriyah</span> <br/>26 Juni 2021";}, 1000);
//]]></script>

Hasilnya :

Catatan :

Silahkan anda rubah sesuai keinginan

• background black
• Warna Angka yellow
• Jenis Huruf / font-family Trebuchet MS
• Warna teks (hari, jam, menit, detik)
• Warna teks-event atau nama event/kegiatan
• Tuliskan nama event/kegiatan Menuju Tahun Baru Hijriyah 1442
• Ukuran font teks event / font-size:21px
• Tanggal kegiatan/event August 20, 2020 menggunakan format bahasa inggris
• Tanggal kegiatan/event di bawah teks kegiatan 26 Juni 2021

Silahkan dicoba-coba saja

Untuk menampilkan tanggal sekarang silahkan baca Cara Memasang Hari, Tanggal dan Jam di Blog