Cara Membuat Tombol Unduh Disertai Durasi 10 Detik

Pilihan Editor :

Cara Membuat Tombol Unduh Disertai Durasi 10 Detik
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!!

9 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
  4. mas, kok error "Kesalahan saat mengurai XML, baris 4310, kolom 17: The content of elements must consist of well-formed character data or markup."

    gimana cara atasinnya?
    ane pake viomagz

    BalasHapus
    Balasan
    1. Kalo boleh tahu apakah mas mengedit kode nya lewat hp.. Lalu upload file.xml nya via hp juga?
      Jika iya.. Sebaiknya edit kode nya menggunakan pc/laptop.. Kemudian mengikuti petunjuk yg telah dijelaskan di blog..

      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.