Cara Membuat Tombol Download seperti Jalan Tikus + Countdown Timer

Kali ini saya akan menjelaskan tutorial bagaimana caranya membuat tombol Download seperti Jalan Tikus, disertai waktu (Countdown Timer).

Buat yang belum paham, Countdown Timer adalah fitur hitung ke belakang, dari 10, 9, 8 sampai 0. Setelahnya, muncul teks "Download" yang aktif apabila diklik.

Tampilannya seperti ini:

Keren banget, kan?

Cara Membuat Tombol Download seperti Jalan Tikus + Countdown Timer

Blogger > Tema > Edit HTML

Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>

#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#1DB954;color:#fff;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}
#btnx:hover,#downloadx:hover{background:#1db95480;color:#fff;outline:none}
.batas-downx{display:block;margin:0 auto;border-radius:4px}
.dalam-downx{background:#222 url('#');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:#ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}
.catatan-downx:before{content:'\f05a';display:table;float:left;font-family:FontAwesome;font-size:32px;margin:-5px 10px auto auto}
#downloadx{float:right}
#downloadx{padding:10px 20px;border-radius:3px;background:#ffc832;color:#222;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:5px}
@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,#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

Lalu simpan JavaScript (Js) di bawah ini, di atas kode </head> atau </body>

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

Pastikan pula di dalam Template Blogger yang kalian gunakan sudah terpasang Font Awesome versi terbaru seperti ini:

//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Jika belum terpasang Font Awesome, silakan simpan JavaScript (Js) dari Font Awesome di bawah ini, di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
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("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Sampai di sini, ketuk tombol Save Template untuk menyimpan semua perubahan yang sudah dilakukan di Template Blogger yang kita miliki.

Kode atau atribut HTML yang perlu digunakan untuk memanggil fitur ini:

<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 fa-fw" aria-hidden="true"></i>download</button>
<a id="downloadx" href="https://kodebloggerku.blogspot.com/" style="display:none"><i class="fa fa-cloud-download fa-fw" aria-hidden="true"></i>Download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle fa-fw" aria-hidden="true"></i> Nama Uploader / Creator</span> <span class="file-size"> <i class="fa fa-file fa-fw" aria-hidden="true"></i>
File Size: 2GB</span>
</div>
</div>
<div class="catatan-downx">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak, silahkan melapor melalui halaman Kontak blog ini.
</div>
</div>

Ada beberapa kode yang bisa diganti / diubah, sudah ditandai. Jadi bisa disesuaikan dengan keinginan masing-masing. Ingat, mode tulisnya yaitu HTML, bukan Compose.*

Sumber: https://moccatory.blogspot.com/2018/12/download-box-button-dengan-countdown.html