Halo sobat blogger pada kesempatan kali ini, admin akan membagikan tutorial membuat tombol download dengan countdown timer. Button download dengan countdown ini hanya dibuat dengan css dan javascript.
Jika biasanya tampilan button download biasa saja, sekarang admin bagikan yang tampilannya lebih keren dan responsive. Button ini admin ambil dari template median ui 1.5 dan sudah admin ganti nama kodenya, supaya jika kalian juga menggunakan template median ui, nantinya tombol ini tidak akan bentrok dengan kode bawaan template.
Untuk cara kerja tombol ini adalah, ketika tombol ditekan maka countdown timer akan berjalan dan jika sudah selesai, secara otomatis akan langsung redirect pada url tujuan. Silahkan lihat demo terlebih dulu, jika dirasa tertarik menggunakan, langsung saja pasang di blog kalian. Dengan cara sebagai berikut.
Cara Membuat Tombol Download Dengan Countdown Timer
1). Buka blogger > Tema > Edit Html
2). Selanjutnya cari kode ]]></b:skin> dan letakan kode dibawah ini tepat di atasnya.
.mbdownload{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.mbdownload a, .mbdownload .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.mbdownload a{background-color:#005af0;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.mbdownload a:after{content:attr(aria-label)}
.mbdownload .fileType:before{content:attr(data-text)}
.mbdownload .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.mbdownload .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbdownload .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icons.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icons{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.Getmb{display:none}
@media screen and (max-width:480px){
.mbdownload{padding:12px}
.mbdownload a{width:50px;height:50px;border-radius:10px}
.mbdownload a:after{display:none}
.mbdownload a .icons{margin:0}}
3). Langkah ketiga cari kode </body> lalu tempelkan kode dibawah ini tepat di atas kode tersebut.
<script>
//<![CDATA[
var timeLeft = 10; // untuk waktunya atur di sini
var downloadBtn=document.querySelector('.filemb'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.Getmb').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Harap Tunggu <span>'+timeLeft+'</span> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]>
</script>
4). Dibawah ini adalah kode tombolnya, terserah kalian mau di letakkan dimana, sesuai kebutuhan aja. Bisa ditengah postingan atau di bawah postingan.
<div class='mbdownload'> <span class='fileType' data-text='zip'></span> <div class='fileName'> <span class='textd'>file_name.zip</span> <span class='fileSize'>500kb</span> </div> <a class='filemb' aria-label='Download'><i class='icons download'></i></a> </div> <div class='Getmb'>https://www.google.com</div>
Ganti yang saya tandai sesuai dengan kebutuhan kalian
5). Selesai
Mungkin itu saja yang dapat admin bagikan kali ini, semoga bermanfaat. Jika ada yang ingin kalian tanyakan, silahkan tulis komentar dibawah. Akhir kata, saya ucapkan. Terimakasih