Cara Membuat Tombol Download Otomatis Dengan Timer - Hendrix Cat

    Social Items

Hendrix Cat

Metaltaila.co Adalah Blog Berbagi Template Premium

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

Cara Membuat Tombol Download Otomatis 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 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
Load Comments

Subscribe Our Newsletter

Notifications

Disqus Logo