Cara Membuat Tombol Download Dengan Timer

Cara Membuat Tombol Download Dengan Timer

Hai sob kali ini saya akan berbagi tentang tutorial bagaimana cara membuat tombol download otomatis dengan menggunakan timer, bisa dibilang countdown timer. nah untuk pembuatan ini cukup mudah skali mari kita coba dengan tutorial sederhana ini

Countdown Timer

  • Silahkan login dulu ke Dashboard blogger
  • Pilih Tema > Edit HTML
  • Letakan script berikut diatas kode </head>

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#4CC499;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#00B894;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#4CC499;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>

  • Setelah itu pastekan script pemanggilnya tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=15,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>


  • Save template anda


Untuk memasang kode download pada postingan silahkan copy script berikut di postingan anda pada mode HTML

<!--Download Btn Start-->
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File Download</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> download</button>
<a href="#" id="downloadx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i>Downloading</a>
<br />
<div style="text-align: left;">
File Size: 7MB</div>
</div>
<!--Download end--></div>


Pengaturan Lainnya :

  • Untuk mengatur detik hitung mundur silahkan rubah kode berikut .href,l=15 (ganti 15 dengan sesuka anda)

Ok begitulah Cara membuat tombol download otomatis dengan timer. secara pendapat pribadi ini bisa di gunakan untuk blog yang berniche download loh. diantaranya download template, apk, software atau musik dan tentu file file lainnya. nah semoga tutorial ini bermanfaat.
Load comments