Cara Membuat Tombol Download onclick Penghitung Mundur di Blog

auqriblog - Cara membuat safelink hitung mundur sederhana di blog. Jadi tombol penghitung mundur ini menggunakan javascript murni tanpa jquery. 

Terkait penempatan tombol bisa digunakan untuk tombol download, live preview, atau tombol lainnya. Lalu untuk link downloadnya akan dialihkan secara otomatis setelah timernya selesai.

Untuk melihat demo tombol safelink penghitung mundur diblog, silahkan lihat contohnya dibawah ini.

➥ DEMO TOMBOL DOWNLOAD Download File

Bagaimana, sungguh menarik bukan? Nah sebenarnya kamu juga bisa mengkombinasikan tombol penghitung mundur ini dengan teks yang hanya muncul ketika tombol diklik. Silahkan lihat demonya pada tombol download diatas.

Baca Juga: Cara Membuat Teks Hanya Muncul Ketika Tombol di Klik

Untuk membuat tombol download penghitung mundurnya, kamu bisa ikuti panduannya dibawah ini

Langkah Pertama, silahkan 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>

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

#link-download {
display: none
}

Langkah Ketiga, silahkan simpan template blog.

Jika sudah selesai, silahkan buka post artikel blog yang ingin dipasang tombol ini, pada post artikel tersebut silahkan pilih Mode Tampilan HTML lalu tempelkan kode dibawah ini pada lokasi yang kamu inginkan

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

Selesai. Untuk kode yang saya tandai itu adalah permalink atau URL nya, silahkan diganti dengan link download atau link tujuan dari tombol tersebut setelah diklik.

Bagaimana, apakah berhasil ? Jika iya begitulah terkait cara membuat tombol download onclick penghitung mundur di blog, semoga bermanfaat.