Cara Membuat Tombol Download Box Dengan Countdown

Cara Membuat Tombol Download Box Dengan Countdown - Mungkin kalian pernah melihat disalah satu blog download, yang mana mereka memiliki tombol download dengan fitur countdown (hitung mundur). Dimana countdown ini, akan membuka link tujuan setelah beberapa waktu menunggu.

Nah pada kesempatan kali ini, saya akan membagikan sedikit tips tentang cara membuat tombol download dengan fitur countdown. Saya rasa bagi kamu yang memiliki blog khusus download software, games maupun mp3, tidak ada salahnya jika kamu menggunakan tombol download dengan countdown yang akan saya bagikan kali ini.

Baiklah, langsung saja ikuti langkah-langkah berikut.

Membuat Tombol Download Box Dengan Countdown

Sebelum membuat widget ini, hal pertama yang harus kamu lakukan adalah memastikan jika didalam tema blog kamu sudah terdapat script Fontawesome. Jika belum, kamu bisa menambahkan script Fontawesome berikut ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; didalam tema blog kamu.

<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>

Selanjutnya, tambahkan kode CSS berikut sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; didalam tema blog kamu.

<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:#547A92;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, tambahkan kode berikut sebelum 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=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>

Edit tulisan pada kode yang ditandai, untuk kode l=10; angka 10 artinya waktu mundur yang dibutuhkan adalah 10 detik.

Setelah semua selesai, simpan tema.

Untuk kode pemanggilan tombol download dengan countdown, tambahkan kode dibawah ini disetiap postingan kamu pada tab HTML.

<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> Beesinu Blogger</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size: 10MB</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>

Edit kembali tulisan yang ditandai dengan tulisan dan link download kamu. Untuk url link download, kamu bisa mengganti kode linkdownloadx pada kode tersebut.

Untuk melihat hasilnya, kamu bisa lihat demo berikut.

Demo

Bagaimana, menarik kan hasilnya?

Baiklah, saya rasa itu saja yang bisa saya bagikan kesempatan kali ini. Semoga artikel Cara Membuat Tombol Download Box Dengan Countdown, ini bisa bermanfaat untuk kalian semua. Sampai jumpa.