bergabung di grup telegram kami

cara membuat countdown timer download di blogger

tombol download dengan peghitung waktu mundur

cara membuat countdown timer download di blogger

tombol download dengan peghitung waktu mundur

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 letkkan di atas kode ]]></b:skin> atau di atas kode </style>

.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://www.wendycode.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://www.wendycode.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 :
tutorial blogger
perlu bantuan?