website<\/a> yang dapat meningkatkan ketertarikan atau interaksi dengan pengunjung website dan membuat mereka membuka website Anda kembali.<\/p>\nCara mengaktifkan dan menonaktifkan countdown timer pun sangat mudah dan beragam. Ada yang membuat countdown timer dengan JavaScript, tapi cara ini tidak terlalu bersahabat bagi Anda yang belum pernah belajar mengenai pemrograman komputer. Sedangkan cara yang cukup mudah adalah menggunakan plugin di WordPress. Supaya lebih jelas dalam memahami countdown timer, pada artikel ini kami akan memberikan panduan kepada Anda bagaimana cara membuat countdown timer dengan JavaScript dan alternatifnya.<\/p>\n
Kapan Saat yang Tepat Memasang Countdown Timer?<\/h2>\n
Memasang countdown timer dianggap dapat membangun antisipasi kepada pelanggan dan membantu meningkatkan interaksi dengan pengguna. Selain itu ada istilah \u201cfear of missing<\/em>\u201d, yaitu kecenderungan seseorang untuk tidak ingin melewatkan informasi, diskon, atau berita. Adanya countdown timer tentu saja untuk membangun perasaan ini pada pengunjung website.<\/p>\nJadi, countdown timer sangat berguna ketika Anda ingin mengingatkan pelanggan atau pengunjung website tentang beberapa hal, seperti momen penting yang akan terjadi di dalam bisnis, acara yang akan datang, peluncuran produk, atau penawaran promo (diskon) yang dilakukan oleh tim sales atau marketing.
\nAda beberapa momen penting yang dapat Anda manfaatkan dengan countdown timer:<\/p>\n
\n- Saat website sudah akan siap diluncurkan, pasang countdown timer supaya pengunjung tahu kapan website Anda sudah dapat dibuka kembali.<\/li>\n
- Saat ingin mengenalkan produk atau layanan baru.<\/li>\n
- Saat Anda akan mengadakan sebuah acara atau konferensi.<\/li>\n
- Waktu bisnis Anda akan memasuki tahun baru.<\/li>\n
- Countdown timer juga cocok ketika sedang menawarkan diskon besar-besaran seperti\u00a0black friday<\/em>\u00a0dan sebagainya.<\/li>\n
- Selama proses maintenance, Anda dapat menggunakan countdown timer untuk menginformasikan kapan selesainya.<\/li>\n<\/ul>\n
Cara Membuat Countdown Timer dengan JavaScript dan Plugin di WordPress<\/h2>\n
Bagi Anda yang sudah terbiasa dengan bahasa pemrograman JavaScript pasti tidak bingung lagi cara untuk membuat countdown timer. Namun bagi Anda yang masih awam ada pilihan lain selain menggunakan kode JavaScript, yaitu menggunakan plugin yang banyak tersedia di WordPress.
\nSupaya lengkap, pada bagian ini kami akan memberikan panduan cara membuat countdown timer dengan JavaScript dan juga panduan membuat countdown timer menggunakan plugin bagi pengguna WordPress.<\/p>\n
Panduan 1: Membuat Countdown Timer Menggunakan JavaScript<\/strong><\/h3>\nJavaScript merupakan bahasa pemrograman yang populer digunakan oleh pengembang website. Salah satu kegunaannya adalah membuat website yang interaktif. Bahasa ini juga dapat membantu HTML dalam proses pengelolaan file maupun menggunakan modul-modul lainnya.
\nDi bawah ini adalah contoh kode JavaScript yang digunakan untuk membuat countdown timer menggunakan JavaScript dengan sederhana. Variabel\u00a0countDownDate<\/strong>\u00a0adalah waktu berakhirnya waktu countdown.
\n<\/code><\/p>\n<p id=\"demo\"><\/p>\r\n<script>\r\n\/\/ Mengatur waktu akhir perhitungan mundur\r\nvar countDownDate = new Date(\"Dec 5, 2019 15:37:25\").getTime();\r\n\/\/ Memperbarui hitungan mundur setiap 1 detik\r\nvar x = setInterval(function() {\r\n \/\/ Untuk mendapatkan tanggal dan waktu hari ini\r\n var now = new Date().getTime();\r\n \/\/ Temukan jarak antara sekarang dan tanggal hitung mundur\r\n var distance = countDownDate - now;\r\n \/\/ Perhitungan waktu untuk hari, jam, menit dan detik\r\n var days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\r\n var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n var minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\r\n var seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\r\n \/\/ Keluarkan hasil dalam elemen dengan id = \"demo\"\r\n document.getElementById(\"demo\").innerHTML = days + \"d \" + hours + \"h \"\r\n + minutes + \"m \" + seconds + \"s \";\r\n \/\/ Jika hitungan mundur selesai, tulis beberapa teks \r\n if (distance < 0) {\r\n clearInterval(x);\r\n document.getElementById(\"demo\").innerHTML = \"EXPIRED\";\r\n }\r\n}, 1000);\r\n<\/script><\/code><\/pre>\nTampilan countdown timer di atas kurang lebih seperti di bawah ini:<\/p>\n
Panduan 2: Membuat Countdown Timer dengan JavaScript untuk Halaman Coming Soon<\/strong><\/h3>\nSaat mengembangkan website terkadang Anda membeli terlebih dahulu domain dan hosting baru kemudian melanjutkan mengembangkan website. Supaya pengunjung tidak melihat tampilan website asli ketika dalam proses pengembangan, maka website diberikan tampilan\u00a0coming soon<\/em>.<\/p>\nKetika website sudah mau siap dan Anda sudah tahu kapan waktu untuk meluncurkannya, maka menampilkan countdown timer adalah salah satu cara kreatif yang dapat dicoba.
\nDi bawah ini adalah contoh tampilan halaman\u00a0coming soon<\/em>\u00a0dengan countdown timer di dalamnya. Anda dapat mengatur tampilan sesuai dengan keinginan; mengubah\u00a0background<\/em>, mengatur tanggal, dan menambahkan fitur lainnya.
\n<\/code><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<style>\r\nbody, html {\r\n height: 100%;\r\n margin: 0;\r\n}\r\n.bgimg {\r\n background-image: url('\/w3images\/forestbridge.jpg');\r\n height: 100%;\r\n background-position: center;\r\n background-size: cover;\r\n position: relative;\r\n color: white;\r\n font-family: \"Courier New\", Courier, monospace;\r\n font-size: 25px;\r\n}\r\n.topleft {\r\n position: absolute;\r\n top: 0;\r\n left: 16px;\r\n}\r\n.bottomleft {\r\n position: absolute;\r\n bottom: 0;\r\n left: 16px;\r\n}\r\n.middle {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center;\r\n}\r\nhr {\r\n margin: auto;\r\n width: 40%;\r\n}\r\n<\/style>\r\n<body>\r\n<div>\r\n <div>\r\n <p>Unknown<\/p>\r\n <\/div>\r\n <div>\r\n <h1>COMING SOON<\/h1>\r\n <hr>\r\n<p id=\"demo\"><\/p>\r\n <\/div>\r\n <div>\r\n <p>notfound<\/p>\r\n <\/div>\r\n<\/div>\r\n<!-- Display the countdown timer in an element -->\r\n<script>\r\n\/\/ Set the date we're counting down to\r\nvar countDownDate = new Date(\"Jan 5, 2021 15:37:25\").getTime();\r\n\/\/ Update the count down every 1 second\r\nvar x = setInterval(function() {\r\n \/\/ Get today's date and time\r\n var now = new Date().getTime();\r\n \/\/ Find the distance between now and the count down date\r\n var distance = countDownDate - now;\r\n \/\/ Time calculations for days, hours, minutes and seconds\r\n var days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\r\n var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n var minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\r\n var seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\r\n \/\/ Display the result in the element with id=\"demo\"\r\n document.getElementById(\"demo\").innerHTML = days + \"d \" + hours + \"h \"\r\n + minutes + \"m \" + seconds + \"s \";\r\n \/\/ If the count down is finished, write some text\r\n if (distance < 0) {\r\n clearInterval(x);\r\n document.getElementById(\"demo\").innerHTML = \"EXPIRED\";\r\n }\r\n}, 1000);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\nKode JavaScript di atas akan menampilkan tampilan seperti di bawah ini:<\/p>\n
Panduan 3: Membuat Countdown Timer Menggunakan Plugin di WordPress<\/strong><\/h3>\nPengguna WordPress cukup beruntung karena dimudahkan dengan tersedianya plugin di WordPress. Untuk menambahkan fitur countdown, Anda cukup melakukan instalasi plugin dan mengatur berbagai macam konfigurasinya hanya dengan beberapa kali klik saja.<\/p>\n
Ada berbagai macam plugin countdown timer yang tersedia di WordPress. Tidak hanya jenis plugin saja, jenis countdown pun berbeda beda, seperti\u00a0countdown<\/em>\u00a0widget<\/em>, countdown timer yang dinamis, dan\u00a0coming soon<\/em>\u00a0& mode\u00a0maintenance<\/em>\u00a0countdown<\/em>.
\nSebagai contoh, ada salah satu plugin yang akan dibahas. Supaya lebih jelas, mari lihat bagaimana mudahnya menambahkan countdown di WordPress menggunakan plugin\u00a0Countdown Timer Ultimate<\/strong>. Ini adalah plugin yang cukup mudah dan mempunyai banyak fitur yang dapat Anda manfaatkan.<\/p>\nLangkah 1 \u2013 Instalasi dan Konfigurasi Plugin Countdown Timer Ultimate<\/strong><\/h4>\nHal pertama yang perlu Anda lakukan adalah menginstal plugin Countdown Timer Ultimate. Silakan mengikuti di artikel\u00a0panduan untuk menginstall plugin di WordPress\u00a0untuk melakukannya.<\/p>\n
Setelah selesai melakukan proses instalasi dan mengaktifkannya, buka halaman\u00a0\u201cCountdown Timer \u00bb Add Timer\u201d\u00a0<\/strong>\u00a0di dalam dashboard WordPress.<\/p>\nNamun sebelum itu pastikan bahwa timezone yang Anda gunakan sudah sesuai dengan timezone server, sehingga tidak ada perbedaan di antara keduanya. Untuk mengubah pengaturan\u00a0timezone<\/em>, Anda dapat membuat halaman setting di\u00a0\u201cSetting<\/strong>\u00a0\u00bb General\u201d<\/strong>.<\/p>\nSetelah itu, Anda scroll ke bawah untuk mengatur tanggal kadaluarsa, hari, dan waktu untuk diterapkan pada tampilan countdown timer.<\/p>\n
Kemudian dibawahnya Anda dapat memilih tipe animasi yang ingin ditampilkan;\u00a0smooth<\/em>\u00a0atau\u00a0thick<\/em>. Anda juga dapat mengatur lebar lingkaran dan latar belakang dengan mudah melalui pengaturan plugin.<\/p>\nDi dalam\u00a0countdown<\/em>\u00a0width<\/em>, Anda dapat menyesuaikan ukuran tampilan dari\u00a0countdown widget<\/em>. Jika ingin menampilkan countdown dengan ukuran default, kosongkan saja kolom tersebut.<\/p>\nSetelah Anda mengatur dan menambahkan tampilan latar dan tampilan depan. Anda dapat mengatur warna untuk hari, tanggal, jam, dan detik secara terpisah. Anda juga dapat mengubah label dari setiap elemen tersebut.<\/p>\n
Anda dapat menyesuaikan berbagai pengaturan tampilan ini sesuai dengan kebutuhan. Jika ingin menampilkan tampilan yang sederhana, cukup atur beberapa bagian saja. Saat semua pengaturan sudah sesuai, klik tombol\u00a0\u201cPublish\u201d<\/strong>\u00a0yang ada di bagian kanan atas.<\/p>\n