Cara Membuat Widget Countdown Timer

Digital Hamireland | Cara Membuat Widget Countdown Timer - Pada kesempatan kali ini saya akan berbagi tutorial cara membuat widget countdown timer (hitung mundur). Countdown timer biasanya sering digunakan untuk menyambut agenda seperti hari ulang tahun,tahun baru, pemilihan umum, dll.

Hal yang paling sering menggunakan countdown timer adalah moment tahun baru yang tidak ingin ditinggalkan. Tahun baru merupakan salah satu event tahunan yang cukup meriah loh . . .
Dengan banyaknya hiburan dan pesta kembang api. Atau kalian memiliki sebuah komunitas tertentu yang ingin membuat event atau agenda besar sehingga penting rasanya untuk memasang wigdet countdown timer di blog atau website. Yuk , langsung saja kita simak tutorialnya dengan baik.

Cara Membuat Widget Countdown Timer 

Membuat Widget Countdown Timer tentu bukanlah hal yang sulit, karena banyak sekali cara yang dapat dilakukan untuk membuatnya mulai dari Countdown online dengan html.

Nah, kali ini saya akan memberikan tutorial lengkap membuat countdown terbaru untuk bisa dipasang di semua blog atau website. Kalian bisa memilih cara berikut ini dan sesuaikan dengan kebutuhan kalian masing-masing yah.

.:: Membuat Countdown Timer Di Website
Cara yang pertama ini menggunakan tool online untuk membuat countdown, sehingga bisa dipasang pada website atau blog. 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.

1. Event name : Silahkan isi dengan nama event misalkan: Tahun baru
2. Event date : Tentukan tanggalnya.
3. Event time: Tentukan waktunya.
4. Timezone : Silahkan sesuaikan zona waktu, jika di Indonesia bisa pilih time zone Indonesia.
5. Language : Pilih bahasa sesuai yang anda inginkan.
6. Style : Gaya tampilan bertingkat atau persegi panjang, Anda bisa menconanya.
7. Size : Ukuran Widget
8. Colors: Warna widget mulai dari tulisan dan background
9. 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”
• Selanjutnya copy kodenya dan pasang di sidebar blog atau website Anda.
• Selesai dan lihat hasilnya sekarang juga!

.:: 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("Mei 27, 2018").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> 2019";
}, 1000);
//]]>
</script>

Note :

Mei 27, 2018 = Silahkan ganti waktu yang diinginkan.

Menuju tahun 2019 = Silahkan ganti dengan nama event yang anda inginkan

Yah , cukup sekian dari saya semoga dengan adanya website ini kalian mengerti dan semoga website ini bermanfaat untuk kalian semua , sekian dan terima kasih ^0^