Membuat Countdown Timer Event 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.
Saran saya, jika ingin membuat fitur countdown timer ini di blog, sebaiknya jangan pasang script-nya di template blog. Tapi cukup pasang langsung di postingan blog kamu saja. Hal ini bertujuan agar tidak mengurangi performa loading blog.
Cara Memasang Hari, Tanggal dan Jam di Blog
- Masuk ke Dashbor Blog
- Klik "Tata Letak"
- Klik "Tambahkan Gadget"
- Klik "HTML/JavaScript"
Masukan kode yang ada di bawah (silahkan pilih kode sesuai keinginan)
<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("Mei 29, 2023").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 akan seperti ini
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
Source:
https://catatan-blog-ku.blogspot.com/2020/04/cara-membuat-waktu-hitung-mundur.html
Join the conversation