Make a Download Button With Countdown Timer

Hari ini saya akan berbagi bagaimana membuat timer hitung mundur 10 detik sebelum tombol download muncul. Anda mungkin terlihat di banyak permainan dan halaman download situs perangkat lunak seperti 4shared, Rapidshare dan lain-lain, ketika memuat halaman, timer 10 detik secara otomatis memulai. kemudian setelah waktunya habis tombol download muncul bagi orang untuk mengklik link dan mulai men-downloadnya. mengapa Anda harus melakukan ini pada blog Anda? Anda dapat menempatkan iklan di atas dan di bawah dari tombol download dan timer. ada banyak kesempatan untuk mendapatkan lebih banyak klik pada iklan Anda. ini adalah salah satu hal terbaik tentang script ini. Namun, Anda dapat menggunakan ini untuk hal-hal yang berbeda dari pikiran Anda. Jadi, jika Anda ingin menambahkan tombol download dengan penghitung waktu mundur sebelum pada halaman download. Ikuti saja langkah-langkah sederhana di bawah ini.

DEMO

Pastikan anda sudah memiliki jQuery dalam template anda

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"/>

Sekarang pergi ke gambar pensil besar, masuk ke mode HTML, letakkan kode di bawah ini dan kemudian ubah link downloadnya dan publikasikan.

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

Taruh kode tersebut iatas kode </head> atau </body>
Lalu gunakan kode berikut ketika anda menuliskannya di artikel

<button onclick="generate()" id="btn">Download</button>
<a id="download" href="THEDOWNLOADLINK" style="display:none">Download lagu</a>

Langkah terakhir, taruh kode css ini untuk memnyembunyikan link download

#link-download {
display: none
}

LIVE DEMO

SELESAI :]

http://www.makingdifferent.com/make-countdown-timer-download-button-link-appears/ and http://the-anarchyta.blogspot.com/2014/05/button-download-with-countdown-timer.html

Tweet