Cara Membuat Tombol download dengan waktu atau 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 lur...
Silahkan login dulu ke Dashboard blogger agan kemudian pilih Tema > Edit HTML. kemudian pastekan script di bawah ini tepat 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 lur
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. semoga bermanfaat