Membuat Tombol Download Dengan Countdown Timer

Membuat Tombol Download Dengan Countdown Timer - Tombol Download adalah salah satu bagian yang cukup penting dari sebuah blog atau website, walaupun blog kita bukanlah blog download pasti ada saatnya kita membagikan file kepada pengunjung seperti, template, musik, dan sebagainya. Apalagi jika blog anda adalah blog Download pasti Tombol Download ini akan sangat bermanfaat. :)

Nah.. pada kesempatan kali ini saya akan berbagi sedikit tips variasi dari membuat tombol download, karna tombol download kali ini telah divariasikan dengan Countdown Timer. Artinya apa? artinya adalah membuat tombol download yang tidak langsung menujung Link Download, Melainkan menunggu dulu dengan waktu yang telah diatur baru link akan me-redirect kepada Link Download.

Demo: Silahkan klik tombol  Terima Kasih Telah Mendownload..

Bagaimana? menarik bukan tombol downloadnya? untuk anda yang ingin memasang Tombol Download ini, Silahkan ikuti langkah-langkahnya dibawah ini :
1. Masuk ke akun Blogger
2. Lalu pilih Template > Edit HTML
3. Copy kode berikut dan letakkan di atas tag </body>

 <script type="text/javascript">
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
        } else {
            teks_waktu.innerHTML = "" + waktu.toString() + " Detik";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script> 

4. Copy kode berikut dan simpan dalam CSS template anda.

 #link-download {
display: none
} 

Dan berikut Data Mark'up nya..

 <button onclick="generate()" id="btn">Download</button>
<a id="download" href="link-download" style="display:none">Terima Kasih..</a> 

Data Mark Up ditambah setiap kali anda ingin Membuat Tombol Download Dengan Countdown Timer, Dan kode tersebut diletakkan di Tab HTML bukan Compose. :) Selamat Mencoba!