Update Terbaru, 27 April 2020
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.
Daftar Isi:
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:
1. Silahkan buka situsnya berikut ini: countingdownto.com
2. 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.
3. Jika setting sudah selesai, langkah selanjutnya klik tombol “Add to my website” pada gambar diatas lihat no 10.
4. Selanjutnya copy kodenya dan pasang di sidebar blog atau website Anda.
5. 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
# Cara Membuat Countdown Timer / Hitung Mundur di WordPress
Memasang countdown timer pada wordpress sangatlah mudah, karena banyak sekali plugin countdown yang dapat di instal. Kali ini saya akan memberikan tutorial memasang countdown timer di wordpress dengan plugin UJI COUNTDOWN.
- Silahkan instal plugin Uji Countdown terlebih dahulu. Caranya lakukan pencarian dengan kata kunci uji countdown lalu “Search” jika sudah ketemu langsung instal dan aktifkan.
- Setelah aktif, selanjutnya setting countdown, pilih menu Setting >> Uji countdown
- Silahkan setting sesuai dengan kebutuhan dengan cara membuat style baru.
- Jika sudah selesai setting, jangan lupa klik save dan silahkan pasang di sidebar website Anda. Masuk menu “Appearance” >> Pilih Widgets, Lalu pilih widget uji countdown >> setting sesuai kebutuhan, terakhir klik SAVE dan lihat hasilnya.
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.
){kind=link}
makasih code nya mas,,karna gak paham java yah modal ganti teks nya aja deh…hehe
Sama-sama mas, yang penting hasilnya sesuai yang diinginkan mas. hehe ambil yang paling mudah aja.
gan, itu kok gak bisa masang widget hitung mundur secara bersamaan
Secara bersamaan gmna mas? sebaiknya pasang 1 saja agar loading blog juga tidak berat.
Mas kode hitung mundur yg hanya jamnya aja gimana y mas
hapus bagian ini
+ minutes + " menit " + seconds + " detikMas, kalo pasang di postingan facebook gitu bisa gak ya mas
Tutorial ini hanya untuk blog atau website mas.
Kalau untuk setting waktu ada jam pelaksanaannya bagaimana mas?
Misal : Pukul 14.00 24 April 2020
Countdown ini berlaku untuk global yaitu tanggal agenda saja.
Mas, saya kan mau bikin halaman pendaftaran, nah setelah countdown habis/tiba waktunya, bisa gak diarahkan ke link tertentu?
Untuk tutorial ini tidak bisa mas, dan saya belum pernah mencobanya sampai situ.
Kalau dipasang selain di widget, bisa gak mas?.. Misal di dalam postingan..
Bisa kak pakainya yg html ya jangan taruh di compose
Mas, mau tanya kalo dipasang buat background di Laptop bisa gk ya ?
Tidak bisa gan, ini hanya untuk tampilan blog saja.