Daftar Isi [ Tampilkan ]

Cara Membuat Tombol Download dengan Waktu Penghitung Mundur di Blog. Countdown timer atau penghitung mundur yang disematkan dalam sebuah tombol biasanya diterapkan pada halaman pengalihan atau safelink.

Setelah tombol diklik maka akan muncul waktu penghitung mundur dari angka yang sudah ditentukan oleh pemilik website.

Hal ini dilakukan agar tingkat bounce rate pengunjung bisa dioptimasi dengan baik, bounce rate merupakan sebuah persentase pengunjung yang datang ke situs web, lalu meninggalkan begitu saja tanpa membuka halaman lain maupun berinteraksi di dalamnya.

Cara Membuat Button Download With Countdown Timer

Untuk mengantisipasi hal itu dibuatlah sebuah halaman safelink yang biasanya tidak terpisah dengan blog utamanya, atau membuat tombol download dengan penghitung mundur pada postingan artikelnya

Oleh karena itu pada kesempatan kali ini, blog auqri akan membuat sebuah tombol download onclick penghitung mundur di blog.

➥ DEMO TOMBOL DOWNLOAD

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">Download File</a>

Selesai. Untuk kode yang saya tandai itu adalah permalink atau URL, 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.

Tambahkan komentar anda disini

Ada 4 Komentar Netizen!

Post a Comment

Tambahkan komentar anda disini

Community:
#BCCSquad, BloggerHub.id, Komunitas WB, BRT Network, ODOP.