Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english

cara membuat countdown timer download di blogger

cara membuat countdown timer download di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat countdown timer download di blogger.

jika saat ini kalian sedang mengelola blog yang bertema dwonload mungkin tombol dwonload dengan countdown timer ini cocok untuk blog kalian.

jadi cara kerja tombol ini, ketika user klik tombol dwonload user harus menunggu waktu yang sudah kita tentukan misalkan 10 detik baru link dwonload akan terbuka.

widget tombol dwonload ini juga bisa kalian aplikasikan dengan script memasang iklan adsanse sebelum atau sesudah elemen tertentu untuk menampilkan iklan di atas atau di bawah tombol dwonload tersebut.

disclaimer css dari widget ini saya dapatkan dari bawaan template yang saya gunakan yaitu median-ui 1.5 desginer Muhammad Maki saya di sini hanya menambahkan javascript saja untuk membuat countdown timer pada tombol dwonload tersebut.

jadi jika kalian menggunakan template yang sama dengan saya median-ui 1.5, kalian hanya perlu menggunakan html dan javascriptnya saja karena css nya sudah ada pada template kalian.

untuk demonya silakan klik tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Countdown Timer Download

silakan masuk ke blogger > tema > edit html 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)} 

dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

<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 anggka 10 silakan di sesuaikan, 10 artinya 10 detik link dwonlaod akan terbuka.

Penulisan Dan Cara Penggunaan

ini adalah cara penulisan untuk tombol dwonloadnya, ubah https://blog.choipanwendy.com dengan link dwonload milik kalian, dan selebihnya silakan sesuaikan sendiri.

<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://blog.choipanwendy.com</div>

ok jadi sekian cara membuat countdown timer download di blogger semoga bermanfaat dan terima kasih telah berkunjung.

source css:
https://median-ui.jagodesain.com

Baca juga :

Mau donasi lewat mana?

Paypal
Bank Mandiri - An.wendy yulianto / Rek - 1150006900577
Traktir kreator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas