Cara Membuat Tombol Onclick Hitung Mundur

auqri.com - Tutorial cara membuat tombol onclick hitung mundur sederhana tanpa harus keluar atau pindah postingan diblog. Nantinya pengunjung akan dialihkan secara otomatis setelah timernya selesai.

Untuk melihat demonya, silahkan klik tombol download dibawah ini.

DOWNLOADRedirect

Gimana, menarik kan? Kamu juga bisa mengkombinasikan tombol hitung mundur ini dengan tombol yang hanya akan muncul jika tombol utama diklik. Jadi bisa bikin tombol safelink satu halaman postingan blog sendiri deh. 

Baca Selengkapnya: Cara Membuat Tombol Hanya Muncul Ketika di Klik

Cara Membuat Tombol Onclick Hitung Mundur

Apabila anda ingin membuat tombol seperti pada contoh diatas, silahkan simak langkah-langkahnya dibawah ini:

Pertama, salin dan tempel kode javascript dibawah ini diatas 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>

Kedua, salin dan tempel kode css dibawah ini dalam tag style atau diatas kode penutup ]]></b:skin>

#link-download {
display: none
}

Ketiga, tempelkan kode html dibawah ini pada laman postingan (mode HTML) atau didalam template blog yang anda gunakan saat ini.

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

Selesai.

Pada kode-kode yang saya tandai berwarna kuning itu bisa diubah sesuai dengan preferensi anda.

Kesimpulan

Tutorial cara membuat tombol onclick hitung mundur yang saya bagikan ini sangat sederhana sekali, jadi tidak akan membebankan loading atau kecepatan blog anda. 

Gimana apakah berhasil? Demikianlah tutorial cara membuat tombol onclick penghitung mundur diblog, semoga bermanfaat.