Memasang Tombol Download Box dengan Counter

Posted by wisata jogja

Monday, 24 December 2018

Hallo sobat blogger, jumpa lagi dengan saya, sudah sekian lamanya saya jarang membuat postingan di blog ini.
Nah sobat pada kesempatan kali ini saya menyempatkan diri membuat post lagi. dan saya akan sedikit berbagi kepada kalian Memasang Tombol Download Box dengan Counter, dan untuk Cara Memasang Tombol Download Box dengan Counter kalian bisa mengikuti langkah-langkah dibawah ini.

Dengan mudah, apa lagi bagi kalian yang mempunyai blog download cocok banget style ini kalian gunakan nantinya di postingan kalian, ok kita langsung saja ke pokok ini dari judul diatas.
Memasang Tombol Download Box dengan Counter 
Kalian bisa menggunakan code dibawah ini.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Dan cara menerapkan code diatas kalian buka halaman blogger > PILIH TEMA > EDIT HTML > lalu tempelkan codenya tepat sebelum </head>, dan untuk selanjutnya kalian pasang juga code dibawah ini.

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;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>

Silahkan pasang code CSS diatas tepat sebelum </head>. Dan kalian jangan lupa juga terapkan code dibawah ini.

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,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 siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>

Silahkan kalian pasang code diatas tepat sebelum </body>, nah kalian simpan kembali template yang sudah kalian edit tadi.

Langkah terakhir kalian bisa menggunakan code dibawah ini, untuk memanggil/memunculkan Tombol Download Box dengan Counter 

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="linkdownloadx" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> AGUS GUNAWAN ORIGINAL</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 300MB</span>
</div>
</div>
<div class="catatan-downx">
Jika tidak terdownload otomatis silakan klik download Ulang. Dan jika link rusak silakan lapor melalui halaman Contact Form blog ini.
</div>
</div>

DEMONah sobat kalian bisa sesuaikan kodenya sesuai kebutuhan postingan kalian. Dan mungkin dari saya cukupkan sekian dulu ya tentang Memasang Tombol Download Box dengan Counter selamat mencoba. dan semoga bisa bermanfaat.

Share this post