Cara membuat tombol download dengan waktu di blogger

Hallo semua. pada artikel kali ini saya akan memberikan cara untuk membuat tombol download dengan waktu di blogger.

Mungkin bagi kalian yang mempunyai blog atau website download tutorial kali ini sangat berguna bagi kalian.

Cara kerja tombol ini sangat simpel. yaitu ketika pengguna menekan tombol tersebut maka tombol tersebut tidak langsung mengarahkan ke halaman download melainkan harus menunggu waktu beberapa saat sebelum di alihkan ke halaman download. dan lebih bagusnya adalah waktu sebelum pengalihan tersebut bisa kalian atur sesuai kebutuhan kalian. Tertarik untuk mencobanya? Simak tutorial berikut!

Disclaimer : Saya tidak mengaku bahwa script ini buatan saya melainkan script ini dibuat oleh desainer template Muhammad Maki dan disempurnakan oleh WendyCode.

perlu diperhatikan juga jika kalian menggunakan template median ui 1.5 kalian hanya perlu menambahkan JavaScript dan HTML saja, karna CSS sudah ada di bawaan template tersebut

Cara membuat tombol download dengan waktu

Tambahkan CSS

Masuk ke blogger > tema > edit HTML salin css dibawah ini lalu 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)} 

Tambahkan JavaScript

lalu salin kode dibawah ini dan letakkan diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu klik simpan agar perubahan tersimpan.

<script>

//<![CDATA[

// dwonload countdown timer by wendy code

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>

bagian yang saya tandai dengan warna biru atau angka 10 adalah waktu hitungan mundurnya silahkan atur sesuai kebutuhan kalian.

Cara penggunaan

ini adalah cara penulisan untuk tombol downloadnya silahkan ubah https://loliku.my.id dengan link download milik kalian.

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

oke sekian cara membuat tombol download dengan waktu di blogger semoga bermanfaat, terimakasih telah berkunjung dan terimagaji :v.

Referensi:
https://blog.choipanwendy.com

Try Search Engine Optimization

Cara membuat tombol download, cara membuat tombol download di blog, cara membuat tombol download di html, cara membuat tombol download di php, cara membuat tombol download di wordpress, cara membuat tombol download di youtube, cara membuat tombol download keren, cara buat tombol download, cara membuat tombol download html.