Cara Membuat Countdown Timer (Waktu Hitung Mundur) pada Blog - Hobi Ngoding

hobingoding.com - Countdown timer atau yang dikenal sebagai waktu hitung mundur dalam bahasa Indonesia biasa digunakan untuk menghitung butuh berapa lama lagi waktu yang diperlukan (hari, jam, menit, detik) untuk mencapai sebuah kegiatan, event atau sebuah perayaan.

Contoh yang paling umum, yang mungkin bisa kita lihat bersama yaitu countdown menuju hari Raya Idul Fitri, countdown menuju Tahun Baru, atau bahkan countdown menuju ulang tahun kita sendiri.

Kita juga dapat membuat countdown pada blog kita sendiri dengan menempelkan sejumlah kode HTML pada widget blog yang kita miliki. Adapun tahapan-tahapan yang akan saya jelaskan disini terbagi menjadi dua, yaitu dengan menggunakan bantuan sebuah website (paling mudah) serta dengan menggunakan kode HTML yang mana kode tersebut harus kita custom atau edit sendiri untuk menyesuaikan pada blog yang kita miliki. Berikut tahapan-tahapannya:

Menggunakan Bantuan Tools Online

1. Masuk ke website berikut ini countingdownto.com.

2. Silahkan atur tampilan countdown yang akan kamu buat sesuai keinginan kamu sendiri. Pastikan juga bahwa countdown yang akan kamu buat stylenya sesuai dengan blog yang kamu miliki.

Atur style countdown yang akan kamu buat sesuai keinginanmu.

Adapun bagian-bagian yang dapat kamu atur berupa:
Countdown title: Isi bagian ini dengan judul event yang ingin kamu buat countdownnya.
Countdown to date: Atur bagian ini sesuai dengan tanggal event tersebut.
Event time: Atur bagian ini sesuai dengan jam serta menit event tersebut.
Timezone: Pada bagian ini pilih zona waktu sesuai dengan zona daerah yang kamu tempati.
Languange: Pilih bahasa yang akan digunakan pada countdown yang akan kamu buat.
Repeat: Pilih jangka waktu pengulangan countdown yang ingin kamu buat.
Link: Silahkan isi sesuai dengan url blog kamu.
Style: Website ini menyediakan beberapa style dari countdown itu sendiri, silahkan pilih sesuai dengan keinginan kamu dengan cara mencobanya satu per satu.
Size: Kamu dapat menggeser-geser pilihan ini untuk menentukan ukuran dari tampilan countdown yang akan kamu buat.
Corner radius: Bagian ini digunakan untuk mengatur ketajaman sisi-sisi tampilan countdown yang akan kamu buat.
Colors: Disini kamu dapat mengatur tampilan warna dari teks serta background countdown yang akan kamu buat. Serta terdapat beberapa pilihan lainnya yang masih berhubungan dengan pewarnaan dimana kamu dapat mencobanya sendiri.
Text alignment: Bagian ini berfungsi untuk mengatur posisi teks pada countdown.
Text effect: Pada bagian ini terdapat beberapa pilihan untuk memberikan efek khusus pada teks countdown, kamu dapat mencoba setiap pilihan yang ada.
Text effect stength: Kamu dapat memilih seberapa kuat efek tampilan pada teks countdown yang akan kamu buat.

Jika sudah selesai, klik Embed. Website tersebut akan melakukan reload untuk menampilkan kode javascript dari countdown yang sudah kamu buat tadi.

Salin kode yang muncul.

3. Salin kode HTML yang muncul lalu pastekan ke widget pada blog yang kamu miliki. Caranya buka blogger.com, pilih Tata Letak, klik Tambahkan Gadget, kemudian pilih HTML/JavaScript, lalu pastekan kode HTML tadi pada bagian konten. Kemudian klik Simpan.

Pastekan kode tadi ke widget blogger.

Seperti inilah tampilan countdown yang telah saya buat:

Tampilan countdown.

Menggunakan Source Code HTML

Cara ini sedikit merepotkan serta mengharuskan kamu paling tidak mengetahui bagian CSS dasar dimana kamu disini harus mengatur sendiri tampilan countdown yang akan kamu buat pada bagian CSS nya (bagian CSS sendiri berada diantara <style>.....</style>.
1. Salin terlebih dahulu kode dibawah ini:

<style scoped="scoped" type="text/css">
#hitungmundur{
background:none;
color:red;
font-family:Oswald, Arial, Sans-serif;
font-size:15px;
text-align:center;
padding: 10px 0;
font-weight:normal;
}
.teks {
color:black;
}
</style>

<div id="hitungmundur">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
// set the date we're counting down to
var current_year = new Date().getFullYear();
var target_year = current_year + 1; // Next year
var target_date = new Date("Jan 1, " + target_year).getTime(); // Proper concatenation
// 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 " + target_year + "</span>";
}, 1000);
//]]>
</script>

Pada kode yang berwarna merah silahkan atur sesuai dengan tanggal, bulan dan tahun event yang akan dihitung countdownnya sementara pada kode yang berwarna biru merupakan judul dari event yang akan dhitung countdownnya.

2. Buka blogger.com, pilih Tata Letak, klik Tambahkan Gadget, kemudian pilih HTML/JavaScript, lalu pastekan kode HTML berikut pada bagian konten.Kemudian klik Simpan.

Pastekan kode di atas pada widget blogger.

Beginilah tampilan countdown sesuai dengan kode yang ada di atas:

Tampilan countdown.

Sekian postingan saya tentang Cara Membuat Countdown Timer di Blog, semoga postingan saya ini bermanfaat bagi kamu dan dapat kamu coba praktekkan sendiri, apabila ada pertanyaan silahkan tanyakan di kolom komentar.

Related Posts