Ikuti kami di Blogger atau di Google News
...
Membuat Tombol Download Dengan Timer di Median UI 1.6

Membuat Tombol Download Dengan Timer di Median UI 1.6

Cara membuat tombol download dengan timer pada Median UI 1.6 tanpa css tambahan
Membuat Tombol Download Dengan Timer di Median

Membuat tombol dengan timer di template Median UI 1.6 ini sangat mudah sekali dan tanpa menambahkan css bawaan template.

Mungkin hampir semua blog sekarang ini terdapat halaman yang mempunyai tombol download. Dan penambahan Tombol Download dengan timer ini bisa jadi salah satu yang bisa kalian terapkan.

Cara kerja tombol ini adalah ketika user menekan tombol download maka tidak akan langsung diarahkan ke link yang tertanam, melainkan harus menunggu beberapa detik sesuai dengan pengaturan waktu yang kita inginkan.

Widget ini juga bisa kalian terapkan tepat diatas atau dibawah iklan adsense yang kalian inginkan.

Disclaimer
Widget ini saya dapatkan dari blog Wendy Code dan kreatornya adalah Wendy saya kembangkan sendiri dengan sedikit modifikasi untuk menyesuaikan template Median UI 1.6. Untuk tutorial lengkap kalian bisa mengunjungi langsung blognya.

Jadi jika kalian menggunakan template yang sama yaitu median ui 1.6, kalian hanya perlu menggunakan html dan javascriptnya saja karena css nya sudah ada pada template kalian.

Seperti apa demonya kalian bisa coba klik tombol download dibawah ini.


file_name.zip 200kb

Pada tombol diatas kalian akan menemukan error jika ditekan setelah timer diangka 0. Abaikan saja! dikarena memang link download masih kosong.


Ok untuk kalian yang ingin membuatnya mari ikuti langkah dibawah ini.

Membuat Tombol Download Dengan Timer

silakan masuk ke blogger > tema > edit html kemudian cari CSS dengan nama class .dlBox kemudian tambahkan class dibawah ini.

/* Download btn */ 
.dlBox{max-width:500px;background:#f1f1f0;border-radius:10px;padding:12px;margin:1.7em 0; display:flex;align-items:center; font-size:14px} 
.dlBox .fT{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:45px;height:45px; padding:10px; background:rgba(0,0,0,.1);border-radius:5px} 
.dlBox .fT::before{content:attr(data-text);opacity:.7} 
.dlBox a{flex-shrink:0;margin:0;padding:10px 12px;border-radius:5px;font-size:13px} 
.dlBox a::after{content:attr(aria-label)} 
.dlBox .fN{flex-grow:1; width:calc(100% - 200px);padding:0 15px} 
.dlBox .fN >*{display:red;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 
.dlBox .fS{line-height:16px;font-size:12px;opacity:.8}

/*Tambahkan*/
.TargetLink{display:none}

Perhatikan hanya tambahkan bagian yang saya tandai saja.


Dan kemudian salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

<!--[ Script Countdown Timer Kuymase.com ]-->
<script>
//<![CDATA[
var timeLeft = 10; //atur waktunya di sini
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.TargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Mohon Tunggu<i>'+timeLeft+'</i>Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

bagian yang saya tandai anggka 10 silahkan di sesuaikan, 10 artinya 10 detik link dwonlaod akan terbuka.


Penulisan Dan Cara Penggunaan

ini adalah cara penulisan untuk tombol dwonloadnya, ubah https://www.kuymase.com/ dengan link download milik kalian, dan selebihnya silakan sesuaikan sendiri.

<h2Download Link With Timer</h2>
<div class="dlBox">
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <i class="fT" data-text="zip"></i>
  <div class="fN">
    <!--[ File name ]-->
    <i class='textd'>file_name.zip</i>
    <i class="fS">200kb</i>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class="fileLink button" aria-label="Download"><i class="icon dl"></i></a>
</div>
<!-- https://www.kuymase.com/ ganti dengan link anda -->
<div class='TargetLink'>https://www.kuymase.com/</div>

Jika sudah semua silahkan kalian coba. Semoga berhasil

Oke jadi sekian tutorial singkat Membuat Tombol Download Dengan Timer. Jika ada kesulitan dalam menerapkan widget ini silahkan tinggalkan komentar kalian dan terimakasih telah berkunjung.

Referensi :
https://www.wendycode.com


Baca juga

Advertisement

Dare to be Different!

3 komentar

  1. Linting Daun Bang
    1. Wehh! Apakah itu?
  2. Terima Kasih.. saya coba berhasil kak.. tapi kalau jumlah tombol download dalam postingannya ada banyak, tombol download kedua, ketiga dst tidak berjalan.. mohon bantuannya
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code