Cara Membuat Countdown Timer di WordPress [Terlengkap]

Apakah Anda pernah melihat sebuah website yang di dalamnya terdapat hitungan mundur? Ya, itu adalah countdown timer. Countdown tersebut memiliki tujuan sebagai pengingat dan sebagainya, Apakah website yang dibangun dengan menggunakan WordPress bisa menambahkan countdown di dalamnya?

Jawabannya tentu saja bisa, bahkan cara membuat countdown timer di WordPress juga sangat mudah karena menggunakan bantuan plugin. Bagaimana caranya? Simak pembahasan ini sampai selesai ya!

​Fungsi Countdown untuk Website

Sebelum kita membahas teknikal cara membuat countdown timer di WordPress, apa sih fungsi countdown? Apakah hanya untuk hitungan mundur saja? Tentu saja tidak hanya sekedar untuk hitungan mundur saja.

Countdown timer sangat bermanfaat untuk yang berkecimpung dalam blog e-commerce, terutama ketika website Anda sedang mengadakan event tertentu yang ada batas waktunya. Agar bisa lebih paham, kami coba mengambil contoh website e-commerce.

Di website e-commerce, countdown timer bisa digunakan untuk menghitung mundur terkait produk yang akan diluncurkan. Hal ini bisa memberikan brand awareness kepada calon konsumen terkait produk tersebut.

Sehingga, calon konsumen akan bersiap-siap untuk mendapatkan produk yang akan diluncurkan tersebut dan ini adalah salah satu trik yang efektif untuk meningkatkan penjualan. Intinya dengan adanya timer hitung mundur ini, bisa membuat orang lain selalu mengingat kapan dan tinggal berapa hari lagi acara akan dimulai.

Tapi, ternyata tidak hanya itu saja. Ada yang namanya fear of missing yaitu kecenderungan seseorang untuk tidak ingin melewatkan informasi, berita dan juga diskon. Maka dari itu adanya countdown timer sangat membantu membangun perasaan tersebut.

​Waktu yang Tepat Memasang Countdown Timer

Ada beberapa momen yang tepat Anda memasang countdown timer, berikut diantaranya:

• Ketika website sudah siap untuk diluncurkan, maka Anda bisa memasang countdown timer. Tujuannya agar pengunjung bisa tahu kapan website tersebut bisa dibuka kembali.
• Ketika Anda akan meluncurkan produk baru.
• Ketika perusahaan Anda mengadakan event tertentu.
• Countdown timer juga bisa Anda gunakan ketika produk yang Anda tawarkan sedang diskon besar-besaran.

​Cara Membuat Countdown Timer di WordPress

Ada beberapa cara membuat countdown timer di WordPress dan langkah-langkahnya juga tidak terlalu sulit. Pada artikel ini kami akan membahas dua cara, diantaranya cara membuat countdown timer menggunakan JavaScript dan cara kedua menggunakan bantuan plugin.

Membuat Countdown Timer Menggunakan Javascript

Bagi Anda yang mungkin sudah terbiasa dengan pemrograman javascript, pastinya sudah tidak bingung lagi cara membuat countdown timer menggunakan javascript. Namun untuk beberapa orang mungkin kurang terbiasa dengan pemrograman, sehingga mencari alternatif lain yaitu dengan menggunakan plugin.

Tapi, agar pembahasan lebih lengkap. Pertama kami akan menjelaskan cara membuat countdown timer menggunakan javascript terlebih dahulu sebelum menggunakan plugin. Ikuti saja langkah-langkahnya di bawah ini:

Langkah 1: Login terlebih dahulu ke halaman dashboard WordPress.

Langkah 2: Setelah berhasil login, buka file functions.php dengan cara klik dashboard > appearance > theme editor.

Langkah 3: Tambahkan kode javascript di bawah ini dan save.

<!– Display the countdown timer in an element –>

<p id=”demo”></p>

<script>

// Set a valid end date

var countDownDate = new Date(“Jan 5, 2021 15:37:25”).getTime();

// Update the count down every 1 second

var x = setInterval(function() {

// Get today’s date and time

var now = new Date().getTime();

// Find the distance between now and the countdown date

var distance = countDownDate – now;

// Calculate Remaining Time

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id=”demo”

document.getElementById(“demo”).innerHTML = days + “d ” + hours + “h “

+ minutes + “m ” + seconds + “s “;

// If the countdown is finished, write some text

if (distance < 0) {

clearInterval(x);

document.getElementById(“demo”).innerHTML = “EXPIRED”;

}

}, 1000);

</script>

[Gambar]

Anda bisa mengubah beberapa bagian di dalam kode tersebut sesuai dengan kebutuhan, seperti:

• Set a valid end date: Bagian ini fungsinya untuk menentukan kapan waktu berakhirnya countdown.
• Calculate Remaining Time: Bagian ini untuk menuliskan kalkulasi waktu yang tersisa sampai dengan countdown berakhir.
• Display the result in the element: Bagian ini berfungsi untuk mengatur agar hasil countdown nantinya bisa ditampilkan.
• If the countdown is finished, write some text: Bagian ini untuk menentukan teks apa yang nantinya akan dimunculkan setelah timer berakhir.

Selesai, Anda sudah berhasil membuat countdown menggunakan javascript. Sekarang kita bahas membuat countdown menggunakan plugin, caranya jauh lebih mudah. Meskipun menggunakan javascript ini Anda lebih mudah menyesuaikan user interface-nya.

Membuat Countdown Menggunakan Plugin

Salah satu keunggulan WordPress adalah mudahnya dalam menambahkan fitur-fitur custom, karena tersedianya plugin di WordPress. Caranya sangat gampang!

Langkah 1: Instal dan aktifkan plugin Countdown Timer Ultimate.

Langkah 2: Klik Countdown timer > Add Timer di dalam dashboard WordPress Anda.

Catatan: Namun pastikan terlebih dahulu timezone yang digunakan sudah sesuai dengan timezone server yang Anda gunakan.

Langkah 3: Selanjutnya scroll ke bawah untuk mengatur bagian tanggal kadaluarsa, hari dan waktu yang akan diterapkan oleh Anda di tampilan countdown timer.

Langkah 4: Kemudian, di bagian bawahnya pilih tipe animasi yang akan digunakan. Pilihannya ada dua yaitu smooth atau thick dan settingan seperti lebar lingkaran, latar belakang dan lain sebagainya sesuai dengan kebutuhan.

Langkah 5: Setelah semua pengaturan telah selesai ditetapkan, klik Publish.

Langkah 6: Sekarang, klik di menu Countdown timer dan nanti akan tampil template countdown yang pernah dibuat sebelumnya, pilih salah satu dan copy shortcode yang tertera di sana.

Langkah 7: Setelah disalin, tempelkan shortcode tersebut di halaman yang ingin Anda tambahkan countdown. Misalnya kami menempelkan countdown tersebut di bagian atas artikel, maka kami paste shortcode tersebut.

Langkah 8: Jika berhasil, maka halaman tersebut akan ditampilkan sesuai pengaturan yang Anda buat sebelumnya. Di bawah ini adalah contoh countdown timer yang sudah aktif.

Langkah 9: Jangan lupa untuk save dan buka website untuk cek apakah countdown sudah berfungsi dengan baik atau tidak. Berikut contohnya:

Selesai, sekarang countdown sudah bisa berjalan normal di website.

​Tingkatkan Penjualan dengan Countdown Timer!

Fungsi countdown timer tidak hanya untuk membuat tampilan hitung mundur saja, melainkan bisa memberikan efek kepada calon konsumen agar bersiap untuk membeli produk yang akan Anda luncurkan.

Dengan dukungan teknologi saat ini, membuat countdown timer bisa dilakukan dengan berbagai cara. Anda bisa membuatnya dengan cara manual yaitu menambahkan beberapa kode Javascript atau menggunakan bantuan plugin yang sudah tersedia banyak. Bahkan tidak sedikit, template wordpress gratis saat ini sudah menyediakan fitur countdown.

Sesuaikan saja yang menurut Anda lebih mudah dan menghemat waktu, semoga panduan yang kami berikan ini bisa memberikan manfaat lebih untuk meningkatkan penjualan Anda. Tapi bagaimana bagi yang belum memiliki website?

Tenang saja, sekarang cara membuat website sudah sangat mudah. Miliki terlebih dahulu WordPress hosting, domain dan instal WordPress, maka Anda sudah bisa memiliki website. Domain murah bisa Anda dapatkan di Exabytes Indonesia.

Selamat mencoba ya!