Cara Membuat Tombol Download Di Blogger

Hai. Kali ini aku akan membagikan widget cara membuat  tombol download di blogger dengan countdown timer.

Cara kerja tombol download blogger, jadi jika pengen download file, harus melewati time yang di tentukan.

Nah tombol download blogger ini saya ambil dari template sebelumnya yaitu median ui 1.5 milik Muhammad Maki saya tinggal kasi javascript dan jadilah tombol download blogger.

Btw tombol download blogger ini sangat cocok buat kamu yang kepengen pengguna situs berlama-lama di website kamu.

Cara Membuat Tombol Download Di Blogger Dengan countdown timer

Tanpa perlu lama-lama saya akan membagikan kode download blogger.

1. Kamu login ke dalam akun blog.

2. Pilih menu tema > edit html.

3. Salin CSS di bawah ini dan letakkan 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)} 

4. Terakhir, salin kode javascript di bawah dan letakkan di atas kode  /body atau </body>.

<script>

//<![CDATA[

// download wongkudus

var timeLeft = 10; //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>

 Nah sudah selesai untuk CSS & js nya, tahap terakhir ialah penulisanya 

<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.wongkudus.my.id/</div>

Untuk Link wongkudus.my.id & file name, dll kalian ubah sendiri sesuai kebutuhan.

Kami harap artikel cara membuat tombol download di blog bermanfaat bagi kalian, dan  jangan lupa subscribe tombol agar tidak ketinggalan artikel berikutnya.