Cara Membuat Tombol Download Count Down Timer di Blog

 

Tombol bagi blog merupakan suatu hal yang terpenting, terlebih jika blog tersebut blog yang menyediakan download seperti download template blog, video, musik, dan file-file lainnya yang  di butuhkan pembaca.

Tombol pada blog berfusngsi sebagai element penanda pada blog tersebut dan akan menuju ke link yang di sediakan di dalam tombol download. Ada banyak jenis tombol download seperti direct link, tombol download yang meggunakan timer.

Untuk tombol download yang menggunakan time sering kali kita jumpai pada website-websie yang menyediakan jasa dowload aplikasi-aplikasi. Tujunanya ialah untuk memgurangi rasio bounce atau pantulan pada saat mengklik dan menuju link download.

Untuk memasang tomobol timer dowload di blog silahkan copy paste kode di bawah ini ke dalam ]]></b:skin>.

/* Button with Countdown Timer by www.hidayatcode.com */
.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:4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZVafter{display:none}.buttonTimer a .icon{margin:0}}
/* Dark Mode */
.drK .buttonTimer{background:#1e1e1e;border:0}.drK .buttonTimer .fileType{background:#2d2d30}

Tambahkan juga kode berikut di atas </body>.

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

Save setelah itu buatlah postigan dan masukan kode di bawah ini yang nantinya akan kita kan menampilkan tombol countdown di dalam artikel blog.

<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.hidayatcode.com</div>

Silahkan atur time pada saat pengunjung mengklik tombol download di dalam artikel blog kamu, jangan atur samapi 30 menit