cara membuat countdown timer Download di blogger

zidarma- di artikel kali ini saya akan membagikan tutorial cara membuat countdown timer download di blogger.

Jika anda sedang mengelola blog yang bertemkan download mungkin dengan menggunakan countdown timer ini sangat cocok di pasang di blog anda.

Bagaimana cara kerja countdown timer download ini?

countdown timer download hampir mirip seperti safelink yang mengharuskan user atau pengguna untuk menunggu waktu yang sudah ditentukan sebelum menuju kelink tujuan, dan jika waktu yang sudah ditentukan sudah berakhir maka pengguna akan diarahkan kelink tujuan.

Disclaimer: css widget ini saya dapatkan dari css bawaan median ui 1.5,dan JavaScript saya dapatkan di blog wendy code dan sebelum saya menggunakan javascript nya di widget saya sudah ijin terlebih dahulu kepada pemilik blog wendy code,di sini saya hanya memodifikasi cssnya saja.

Demo

Bagaimana cara memasangnya?

• Login keakun blogger anda masing masing.
• pilih tema > edit HTML
• Silahkan anda letakkan kode css dibawah ini 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}
.AtLinkTarget{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}}
atangka{color:#214ECF;font-size:1.5em;font-weight:bold}
.Aticon{width:65px;height:65px;float:left;}
.post-body
.Blog .post .post-entry .Aticon img, .darkMode .Blog .post .post-entry .post .Aticon img {background-color: unset;}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)} 

• Kemudian letakkan javascript dibawah ini tepat diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

  <script type='text/javascript'>
  var timeLeft = 10; //pengaturan Waktu
  var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.AtLinkTarget').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Harap Tunggu <atangka>'+timeLeft+'</atangka> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
  </script>
  

• ubah Angka 10 dengan waktu yang anda inginkan

Penulisan Dan cara penggunaannya

• Letakka kode HTML ini di postingan atau halaman yang ini anda pasang cara membuat countdown timer download di blogger

<div class='downloadInfo'>
		<div class="Aticon">
			<img alt="gambar title" height="65" src="https://play-lh.googleusercontent.com/N0UxhBVUmx8s7y3F7Kqre2AcpXyPDKAp8nHjiPPoOONc_sfugHCYMjBpbUKCMlK_XUs=s180-rw" title="gambar title" width="65" />
		</div>
<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='AtLinkTarget'>https://www.alfatechnesia.my.id/?m=1</div>

Penting: silahkan ganti yang sudah ditandai di atas

sekian artikel kaliini semoga bermanfaat,dan sampaijumpa di artikel selanjutnya

Referensi:
blog.choipanwendy.com