Cara Membuat Tombol Unduh Disertai Durasi 10 Detik

Pilihan Editor :

Cara Membuat Tombol Unduh Disertai Durasi 10 Detik
Penulis Bagus Surochman
7
Modus malam
AAA
KURAZONE ~ Halo sahabat Kurazer, pernah lihat model download seperti dibawah ini :


--------------------------------

--------------------------------

Model download diatas adalah demo dari tutorial kali ini yang saya rancang berdurasi 60 detik, setelah 60 detiknya habis maka link unduh akan terbuka.

Nah, untuk selanjutnya kalian bisa ubah 60 detiknya menjadi 10 detik.

Berikut adalah ...

Cara Membuat Tombol Unduh Disertai Durasi 10 Detik

1. Buka akun Blogger >> Pilih Tema >> Pilih edit HTML
2. Copy kode JavaScript dibawah ini, kemudian letakkan diatas </body>
<script>var downloadButton = document.getElementById("kuradownload");
var counter = 60;
var newElement = document.createElement("p");
newElement.innerHTML = "Mohon Bersabar!!";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "Link unduh akan segera terbuka dalam " + counter.toString() + " detik lagi.";
    }
}, 1000);</script>
Note :
- Ubah angka 60 menjadi 10 (atau sesuai keinginan kalian), angka yang dimasukkan akan diartikan sebagai detik.
- Ubah teks bewarna kuning sesuai keinginan kalian

3. Copy kode CSS dibawah ini, kemudian letakkan diatas kode ]]></b:skin>
.buttonkura{background-color: #111;border: 2px solid #007bfd;color: white;text-decoration: none;padding: 5px;}
a.buttonkura{color:white !important}
Note :
- Kode CSS ini untuk mensetting warna tombol download
- Silakan diedit sesuai selera

4. Simpan Template

Dari sini kalian sudah memiliki bahan "tombol unduh" nya, selanjutnya tinggal melakukan pemanggilan pada kode "tombol unduh" tersebut. Kode pemanggil ini bisa kalian letakkan didalam artikel yang ingin diberi tombol unduh.
<a class="buttonkura" href="https://www.kurazone.net/" id="kuradownload">Unduh Sekarang!!</a>
Note :
- Ubah https://www.kurazone.net/ nya menjadi URL / link download milik kalian
- Ubah teks "Unduh Sekarang!!" sesuai selera

Cukup mudah bukan?! :v

Itulah informasi mengenai "Cara Membuat Tombol Unduh Disertai Durasi 10 Detik", selamat mencoba dan semoga bermanfaat. Goodluck!!

7 komentar:

  1. Ini tutorial yang ane cari... Makasih bang Agus

    BalasHapus
    Balasan
    1. Iya.. Sama sama mas kojek.. Selamat mencoba..goodluck

      Hapus
  2. Kasih demo nya bang lebih ajib. Jadi pengunjung bza lihat hasilnya kek gmn sih yg dimaksud hee

    BalasHapus
    Balasan
    1. 😒 demo sudah ada didalam artikel. Yg ada dipaling atas..

      Tulisan "link unduh akan segera terbuka dalam...(diikuti hitungan mundur)" 😒😒😒

      Hapus
    2. Kurang nyimak beliau :v

      Hapus
  3. mas kalau gunakan 2 id dalam 1 tag gimana?

    misalnya du tag " id="download htunmundur" ?

    btw kok hitung mundur script di atas sangat lama ?
    gimana agar bisa di percepat sedikit

    BalasHapus
    Balasan
    1. sebaiknya menggunakan class saja mas... id="download" class="htunmundur"..

      sedangkan untuk mempercepat durasi detiknya bisa disetting dengan mengubah angka 60 menjadi angka yg lebih kecil.. (sudah dijelaskan diatas)

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.