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.
Download Link With Timer
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 <!--</body>--></body> 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