Cara Terbaru Menciptakan Countdown Timer (Hitung Mundur)
Cara Terbaru Membuat Widget Countdown Timer atau Waktu Mundur – Countdown timer atau yang biasa dikenal penghitung waktu mundur biasanya sering dipakai untuk menyambut kegiatan menyerupai tahun baru, pemilihan umum, hari ulang tahun, event, dll.
Hal yang paling sering memakai countdown timer atau hitung mundur yaitu moment tahun gres yang tidak ingin ditinggalkan. Tahun gres merupakan salah satu event tahunan yang cukup meriah, dengan banyaknya hiburan dan pesta kembang api. Atau Anda mempunyai sebuah komunitas tertentu yang ingin menciptakan event atau kegiatan besar sehingga penting rasanya untuk memasang wigdet countdown timer di blog atau website.
Membuat widget Countdown Timer atau Hitung Mundur bukanlah hal yang sulit, alasannya berbagai cara yang sanggup dilakukan untuk membuatnya mulai dari Countdown/hitung mundur online, dengan html atau kalau Anda memakai platform WordPress sanggup memakai plugin.
Tutorial Membuat Countdown Timer atau Hitung Mundur
Nah, kali ini saya akan memperlihatkan tutorial lengkap menciptakan countdown terbaru untuk sanggup dipasang di semua blog atau website, pada blogspot blogger dan wordpress. Anda sanggup menentukan 3 cara berikut ini dan sesuaikan dengan kebutuhan.
# Membuat Countdown Timer (Hitung Mundur) di Blog atau Website
Cara yang pertama ini memakai tool online untuk menciptakan countdown, sehingga sanggup 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 menciptakan 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, kalau di Indonesia sanggup pilih time zone Indonesia.
- Language : Pilih bahasa sesuai yang anda inginkan.
- Style : Gaya tampilan bertingkat atau persegi panjang, Anda sanggup menconanya.
- Size : Ukuran Widget
- Colors: Warna widget mulai dari goresan pena dan background
- Text alignment : Silahkan pilih sesuai keinginan, sanggup 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 memakai html sanggup anda pasang di blog atau website.
Untuk memasang widget ini sangatlah mudah, silahkan copy instruksi 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, alasannya berbagai plugin countdown yang sanggup di instal. Kali ini saya akan memperlihatkan 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 kemudian “Search” kalau sudah ketemu eksklusif instal dan aktifkan.
- Setelah aktif, selanjutnya setting countdown, pilih sajian Setting >> Uji countdown
- Silahkan setting sesuai dengan kebutuhan dengan cara menciptakan style baru.
- Jika sudah selesai setting, jangan lupa klik save dan silahkan pasang di sidebar website Anda. Masuk sajian “Appearance” >> Pilih Widgets, Lalu pilih widget uji countdown >> setting sesuai kebutuhan, terakhir klik SAVE dan lihat hasilnya.
Demikian cara menciptakan countdown di blog dan website, biar sanggup bermanfaat. Jika masih resah dan banyak pertanyaan, silahkan tinggalkan pesan pada kolom komentar atau menghubungi admin lewat kontak yang sudah tersedia. Selamat mencoba dan biar berhasil.