Cara Terbaru Membuat Countdown Timer (Hitung Mundur)

Cara Terbaru Membuat Widget Countdown Timer atau Waktu Mundur – Countdown timer atau yang biasa dikenal penghitung waktu mundur biasanya sering digunakan untuk menyambut agenda seperti tahun baru, pemilihan umum, hari ulang tahun, event, dll.

Hal yang paling sering menggunakan countdown timer atau hitung mundur adalah moment tahun baru yang tidak ingin ditinggalkan. Tahun baru merupakan salah satu event tahunan yang cukup meriah, dengan banyaknya hiburan dan pesta kembang api. Atau Anda memiliki sebuah komunitas tertentu yang ingin membuat event atau agenda besar sehingga penting rasanya untuk memasang wigdet countdown timer di blog atau website.

Membuat widget Countdown Timer atau Hitung Mundur bukanlah hal yang sulit, karena banyak sekali cara yang dapat dilakukan untuk membuatnya mulai dari Countdown/hitung mundur online, dengan html atau jika Anda menggunakan platform WordPress bisa menggunakan plugin.

Tutorial Membuat Countdown Timer atau Hitung Mundur

Nah, kali ini saya akan memberikan tutorial lengkap membuat countdown terbaru untuk bisa dipasang di semua blog atau website, pada blogspot blogger dan wordpress. Anda bisa memilih 3 cara berikut ini dan sesuaikan dengan kebutuhan.

# Membuat Countdown Timer (Hitung Mundur) di Blog atau Website

Cara yang pertama ini menggunakan tool online untuk membuat countdown, sehingga bisa dipasang pada semua platform, mulai dari blogspot, wordpress, Weebly, Tumblr, Blog, Blogdetik, dll. Untuk membuatnya silahkan ikuti tutorialnya berikut ini:

• Silahkan buka situsnya berikut ini: countingdownto.com

• Selanjutnya, setting countdown sesuai dengan kebutuhan, mulai dari nama event, waktu, bahasa, warna, dll. cara membuat countdown atau hitung mundur.

Keterangan:

• Event name : Silahkan isi dengan nama event misalkan: Tahun baru
• Event date : Tentukan tanggalnya.
• Event time: Tentukan waktunya.
• Timezone : Silahkan sesuaikan zona waktu, jika di Indonesia bisa pilih time zone Indonesia.
• Language : Pilih bahasa sesuai yang anda inginkan.
• Style : Gaya tampilan bertingkat atau persegi panjang, Anda bisa menconanya.
• Size : Ukuran Widget
• Colors: Warna widget mulai dari tulisan dan background
• Text alignment : Silahkan pilih sesuai keinginan, bisa rata tengah, kiri atau rata kanan.

Jika setting sudah selesai, langkah selanjutnya klik tombol “Add to my website” pada gambar diatas lihat no 10.

Selanjutnya copy kodenya dan pasang di sidebar blog atau website Anda.

 Selesai dan lihat hasilnya.

# Cara Membuat Countdown Timer Sederhana di Blog

Trik yang kedua ini buat Anda yang suka dengan tampilan countdown timer sederhana, dengan menggunakan html bisa anda pasang di blog atau website.

Untuk memasang widget ini sangatlah mudah, silahkan copy kode dibawah ini dan pasang pada widget HTML.

<style scoped="scoped" type="text/css">
#countdownpenaindigo {background:black;color:yellow;font-family:Oswald, Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
.teks {color:white}
</style>
<div id="countdownpenaindigo">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jan 1, 2017").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</span> 2017";
}, 1000);
//]]>
</script>

Keterangan:

• Jan 1, 2017 = Silahkan ganti waktu yang diinginkan.
• menuju tahun 2017 = Silahkan ganti dengan nama event yang anda inginkan

Demikian cara membuat countdown di blog dan website, semoga dapat bermanfaat. Jika masih bingung dan banyak pertanyaan, silahkan tinggalkan pesan pada kolom komentar atau menghubungi admin lewat kontak yang sudah tersedia. Selamat mencoba dan semoga berhasil.

Share this post