Cara Mudah Memasang Countdown Timer Promo Keren di Blogspot

Menambahkan fitur countdown timer atau waktu mundur pada postingan Blogspot adalah salah satu teknik psikologi marketing yang sangat efektif. Dengan adanya waktu yang terus berjalan mundur, pengunjung akan merasa memiliki waktu terbatas untuk mengambil sebuah promo atau penawaran spesial. Hal ini sering disebut dengan teknik FOMO (Fear of Missing Out) yang terbukti ampuh meningkatkan angka konversi penjualan.

Menyiapkan Kode Countdown Timer

Untuk membuat countdown timer di Blogspot, kita tidak memerlukan plugin tambahan yang berat. Kita cukup menggunakan kombinasi HTML, CSS untuk mempercantik tampilan, dan sedikit JavaScript untuk menjalankan logikanya. Kode di bawah ini sudah didesain agar responsif sehingga tetap tampil rapi saat dibuka melalui perangkat mobile maupun desktop.

Silakan salin seluruh kode di bawah ini dan tempelkan ke dalam postingan Blogger Anda pada mode Tampilan HTML (bukan Tampilan Menulis).

<style>
#timer-promo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
  margin: 20px 0;
}
.timer-segment {
  background: #ff5722;
  color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  min-width: 60px;
  text-align: center;
}
.timer-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
}
.timer-label {
  font-size: 12px;
  text-transform: uppercase;
}
#timer-expired {
  display: none;
  color: red;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
</style>

<div id="timer-promo">
  <div class="timer-segment">
    <span class="timer-number" id="days">00</span>
    <span class="timer-label">Hari</span>
  </div>
  <div class="timer-segment">
    <span class="timer-number" id="hours">00</span>
    <span class="timer-label">Jam</span>
  </div>
  <div class="timer-segment">
    <span class="timer-number" id="minutes">00</span>
    <span class="timer-label">Menit</span>
  </div>
  <div class="timer-segment">
    <span class="timer-number" id="seconds">00</span>
    <span class="timer-label">Detik</span>
  </div>
</div>
<div id="timer-expired">PROMO TELAH BERAKHIR!</div>

<script>
// Atur Tanggal Berakhir Promo di sini
var countDownDate = new Date("Dec 31, 2024 23:59:59").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  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);

  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer-promo").style.display = "none";
    document.getElementById("timer-expired").style.display = "block";
  }
}, 1000);
</script>

Cara Mengatur Tanggal Target

Setelah Anda menempelkan kode tersebut, langkah paling penting adalah menentukan kapan promo Anda akan berakhir. Perhatikan bagian JavaScript di dalam kode tersebut, cari baris yang bertuliskan Dec 31, 2024 23:59:59. Anda bisa mengubah teks tersebut sesuai dengan jadwal promo Anda, misalnya menjadi Jan 15, 2025 12:00:00. Pastikan format penulisannya tetap benar agar script dapat menghitung waktu dengan akurat.

Kustomisasi Tampilan

Anda juga bisa menyesuaikan warna kotak countdown agar selaras dengan desain template blog Anda. Pada bagian CSS (di dalam tag style), carilah kode background: #ff5722;. Anda bisa mengganti kode warna hex tersebut dengan warna pilihan Anda sendiri. Misalnya, gunakan #28a745 untuk warna hijau atau #007bff untuk warna biru profesional.

Setelah semua pengaturan selesai, klik tombol publikasikan atau perbarui pada postingan Blogger Anda. Sekarang, pengunjung akan melihat waktu yang terus berjalan mundur, yang secara otomatis akan meningkatkan antusiasme mereka untuk segera melakukan transaksi sebelum waktu habis.