Cara Memasang Tombol dengan Countdown Timer di Blog - Tombol bagi seorang blogger sudah menjadi hal yang sangat penting untuk diperhatikan, apalagi untuk niche download seperti aplikasi, gambar, musik, video, dokumen, dan file-file lainnya.
Tombol sendiri berguna untuk menandakan bahwa elemen terkait dapat diklik dan menuju ke halaman lain. Ada banyak sekali tampilan tombol yang sering kita jumpai, mulai dari direct link hingga yang menggunakan waktu mundur / countdown timer.
Khusus untuk tombol dengan timer, tombol ini biasanya kita jumpai pada website-website penyedia jasa aplikasi. Lalu apa sih tujuan diberikannya waktu tersebut? Jawabannya untuk mengurangi rasio pantulan atau bounce rate.
Bounce rate adalah salah satu metrik penilaian dari Google Analytics untuk menghitung seberapa cepat pengunjung meninggalkan suatu halaman. Semakin lama pengunjung berada di halaman tersebut, itu memberikan sinyal ke mesin pencari bahwa artikel terkait berkualitas dan informatif.
Pemasangan tombol dengan timer berperan dengan menahan atau menjeda pengunjung sebelum dialihkan ke link tujuan. Sebelum lanjut ke cara penerapannya, berikut adalah demo dari tutorial kali ini:
Cara Memasang Tombol dengan Countdown Timer di Blog
- Masuk ke BLOGGER
- Pilih menu TEMA
- Pilih EDIT HTML
- Salin dan tempel di atas ]]></b:skin>:
- Salin dan tempel di atas </body>:
- Pilih SIMPAN
- Selesai.
.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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff'><g transform='translate(2.000000, 4.000000)'><path d='M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z'></path><path d='M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z'></path></g></svg>")}.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}<script> var timeLeft=10;var downloadBtn=document.querySelector('.redirectLink'),countdown=document.querySelector('.textBefore');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.targetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait in <span>'+timeLeft+'</span> second',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)}) </script>
Setelah menyimpan, silahkan masuk ke halaman postingan dan pilih yang ingin diberikan countdown timer button. Lalu tentukan area dan salin script berikut:
<!-- Button with Countdown Timer by www.ferisp.com --> <div class="buttonTimer"> <span class="fileType" data-text="ZIP"></span> <div class="fileName"> <span class="textBefore">Tap to continue!</span> </div> <a class="redirectLink" aria-label="View"><i class="icon download"></i></a> </div> <div class="targetLink">https://www.ferisp.com</div>
Jangan lupa untuk mengedit link yang telah ditandai di atas. Oh iya, Anda juga bebas mengatur waktu mundur dengan mengedit angka pada kode var timeLeft=10.
Apakah tombol dengan countdown timer hanya satu-satunya cara untuk mengurangi persentase bounce rate?
Tidak. Mengurangi persentase bounce rate pada Google Analytics bisa dilakukan dengan beberapa cara, yaitu meningkatkan kualitas tulisan, meningkatkan kecepatan loading, memasang internal link, serta mengatur link menjadi "Open in New Tab".
Penutup
Mengurangi rasio pantulan (bounce rate) dengan menggunakan tombol waktu nyatanya memang ampuh. Namun jenis tombol tersebut juga memiliki kekurangan yaitu dapat membingungkan pengunjung dan terkesan ribet.
Saran saya, jangan pernah mengatur waktu lebih dari 30 detik agar pengunjung tidak menunggu terlalu lama.
Cukup sekian artikel tentang Cara Memasang Tombol dengan Countdown Timer di Blog ini, Terima kasih.