Cara Membuat Tombol Download Dengan Timer di Blogger

Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat tombol download dengan timer di blogger.

Jika kalian mempunyai blog download mungkin dengan memasang tombol download dengan timer sangat cocok buat blog download kalian.

Cara kerja tombol ini sangat keren sekali, jika pengunjung klik tombol download maka pengunjung harus menunggu dengan waktu yang sudah kalian tentukan semisal kalian waktu 20 detik maka setelah menunggu 20 detik link yang dituju akan terbuka.

Jika kalian menggunakan template median ui 1.5 atau median ui 1.6 maka kalian cukup menambahkan javascriptnya saja karena pada template median ui sudah ada CSSnya.

Untuk melihat demonya silahkan klik tombol demo di bawah ini.

Demo

---

Cara Membuat Tombol Download Dengan Timer di Blogger

• Silahkan masuk ke blog kalian pilih tema lalu pilih edit html
• Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>

.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background-color:#f09800;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.wcTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}} 
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)} 

• Salin kode di bawah ini lalu letakan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
// Download countdown by telatngoding
var timeLeft = 20; //atur waktunya di sini
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.wcTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Harap Tunggu <span>'+timeLeft+'</span> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

• Simpan tema kalian.

Untuk yang saya tandai dengan warna kuning yaitu angka 20 silahkan rubah sesuai selera kalian, angaka 20 artinya link download akan terbuka setelah 20 detik.

---

Cara penulisan

Untuk cara penulisan tombol downloadnya silahkan salin kode di bawah ini dan letakan ke dalam postingan kalian lalu rubah pada tulisan https://www.telatngoding.com/ dengan url link download kalian, dan yang lainnya silahkan sesuaikan.

<div class='downloadInfo'>
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<span class='textd'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='wcTargetLink'>https://www.telatngoding.com/</div>

Seperti itulah Cara Membuat Tombol Download Dengan Timer di Blogger dengan mudah, semoga bermanfaat dan terimakasih atas kunjungannya. Salam blogger

Baca juga :

Go to Link