Cara Terbaru Bikin Tombol Countdown Timer di Blogger dengan Mudah

Buat para blogger, terutama yang punya niche download kayak aplikasi, gambar, musik, video, atau dokumen, tombol jadi hal yang penting banget. Kenapa? Karena tombol itu yang nunjukin kalau suatu elemen bisa diklik dan bakal ngebawa pengunjung ke halaman lain.

Ada banyak banget model tombol yang sering kita lihat. Ada yang langsung nge-direct ke link tujuan, ada juga yang pake sistem waktu mundur alias countdown timer. Nah, tombol dengan timer ini sering banget dipakai di website penyedia aplikasi. Tapi, buat apa sih pakai waktu mundur kayak gitu?

Jawabannya simpel: buat ngurangin bounce rate atau rasio pantulan.

Apa Itu Bounce Rate?

Bounce rate adalah metrik yang dipakai Google Analytics buat ngitung seberapa cepat pengunjung cabut dari halaman kita. Makin lama mereka bertahan di halaman, makin bagus di mata mesin pencari. Itu tandanya konten kita berkualitas dan informatif.

Nah, di sinilah peran tombol dengan timer. Dengan adanya jeda waktu sebelum pengunjung bisa ngeklik link tujuan, mereka jadi lebih lama di halaman kita. Itu bisa bantu ningkatin kualitas blog di mata Google.

---

Lihat Demo

Cara Pasang Tombol Countdown Timer di Blog

Oke, sekarang masuk ke tutorialnya. Ikutin langkah-langkah berikut buat nambahin tombol countdown timer di blog kamu.

1. Masuk ke Blogger

Buka Blogger dan login ke akun kamu.

2. Edit Tema

• Pilih menu Tema.
• Klik Edit HTML.

3. Tambahkan Kode CSS

Cari bagian ]]></b:skin> lalu tambahkan kode ini di atasnya:

.buttonTimer{max-width:500px;background:#fcfcfc;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border-radius:5px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}
.buttonTimer a,.buttonTimer .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}
.buttonTimer a{background:#009ee0;color:#fff;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px}
.buttonTimer a:after{content:attr(aria-label)}
.buttonTimer .fileType:before{content:attr(data-text)}
.buttonTimer .fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}
.buttonTimer .fileName>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buttonTimer .linkName{line-height:1.4em;font-size:12px;opacity:.7}
.icon.download{background-image:url("data:image/svg+xml,")}.icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.redirectLink{cursor:pointer}.targetLink{display:none}
@media screen and (max-width:480px){.buttonTimer{padding:12px}.buttonTimer a{width:50px;height:50px;border-radius:10px}.buttonTimer a:after{display:none}.buttonTimer a .icon{margin:0}}
/* Dark Mode */
.drK .buttonTimer{background:#1e1e1e;border:0}.drK .buttonTimer .fileType{background:#2d2d30}

4. Tambahkan Kode JavaScript

Cari </body> lalu tempel kode ini di atasnya:

<script>
var timeLeft = 10;
var downloadBtn = document.querySelector('.redirectLink');
var countdown = document.querySelector('.textBefore');

downloadBtn.addEventListener('click', () => {
  var link = document.querySelector('.targetLink').innerText;
  var timer = setInterval(function () {
    timeLeft -= 1;
    countdown.innerHTML = 'Tunggu ' + timeLeft + ' detik';
    if (timeLeft <= 0) {
      clearInterval(timer);
      window.location.href = link;
    }
  }, 1000);
});
</script>

5. Tambahkan Kode di Postingan

Buka postingan yang mau dikasih tombol timer, lalu tempel kode ini:

<div class="buttonTimer">
  <span class="fileType" data-text="ZIP"></span>
  <div class="fileName">
    <span class="textBefore">Klik untuk melanjutkan!</span>
  </div>
  <a class="redirectLink" aria-label="Lihat"><i class="icon download"></i></a>
</div>
<div class="targetLink">https://www.minekel.com</div>

Jangan lupa ubah https://www.minekel.com dengan link tujuan kamu!

---

Bisa Nggak Ngurangin Bounce Rate Tanpa Timer?

Bisa banget! Selain pakai tombol countdown timer, ada beberapa cara lain buat ngurangin bounce rate:

1. Tulis Konten yang Berkualitas

   • Artikel yang menarik dan informatif bikin pengunjung betah lama-lama di blog.

2. Tingkatkan Kecepatan Loading Blog

   • Blog yang lemot bikin pengunjung males nunggu dan langsung cabut.

3. Gunakan Internal Link

   • Arahkan pengunjung buat baca artikel lain di blog kamu.

4. Atur Link Jadi "Open in New Tab"

   • Supaya blog kamu tetap kebuka meskipun mereka ngeklik link keluar.

---

Kesimpulan

Tombol countdown timer emang ampuh buat ningkatin durasi kunjungan pengunjung di blog kita, yang akhirnya bisa bantu ngurangin bounce rate. Tapi, jangan sampai durasi timernya terlalu lama! Maksimal 30 detik udah cukup, biar pengunjung nggak kesal dan malah kabur.

Selain pakai timer, tetap perhatikan kualitas konten, kecepatan blog, dan strategi internal linking buat optimasi yang lebih maksimal.

Selamat mencoba! 🚀