04 May 2014

Membuat Button Download With Countdown Timer

Button Download With Countdown Timer

Membuat Tombol Download Dengan Hitungan Mundur - Ada Tombol download yang memanfaatkan  tombol sosial media untuk membuka link downloadnya. Dan tombol download yang akan kita bahas memanfaatkan Auto Redirect dengan Timer untuk membuka link download internal atau external.


Simpan Javascript diatas kode </head> atau </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> 

Masukan kode dibawah ini dalam mode HTML, pada postingan sobat.


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

Tambahkan CSS untuk menghilangkan link download


 #link-download {
display: none
} 

Selamat Mencoba....

Itulah Tutorial ''Membuat Button Download With Countdown Timer'' Jangan lupa Like, share dan komentarnya ya,,,


 http://the-anarchyta.blogspot.com/2014/05/button-download-with-countdown-timer.html 
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic