 |
| How to add Countdown Download Timer Button to Blogger |
How to add Countdown Download Timer Button to Blogger
Hello to all my friends on this occasion I will share how to make a countdown timer download on blogger.
if you are currently managing a download-themed blog, maybe this download button with a countdown timer is suitable for your blog.
so how this button works, when the user clicks the download button the user has to wait for the time that we have set, for example 10 seconds, the download link will open.
You can also apply this download button widget with a script to install adsense ads before or after certain elements to display ads above or below the download button.
disclaimer the css of this widget I got from the default template that I use, namely median-ui 1.5 desginer Muhammad Imran Shah, I only add javascript here to create a countdown timer on the download button.
so if you use the same template as me median-ui 1.5, you only need to use the html and javascript because the css is already in your template.
for the demo, please click the button below, ok for those of you who want to make it, let's see how below.
How to Make a Countdown Timer Download
please go to blogger > themes > edit html copy the css below and place it above the code ]]></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}
.bsTargetLink{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)} and finally copy the javascript below and place it above the code </body> or <!--</body>--></body> if you have don't forget to click save.
<script>
//<![CDATA[
// dwonload countdown timer by wendy code
var timeLeft = 10; //set the time here
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.bsTargetLink').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>the part that I marked as 10 please adjust, 10 means 10 seconds the download link will open.
Writing And How To Use
this is the way of writing for the download button, change https://www.blogger-store.com with your download link, and the rest please adjust it yourself.
<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='bsTargetLink'>https://www.blogger-store.com</div>ok so that 's how to make a countdown timer download on blogger, hopefully it's useful and thank you for visiting.
Thanks for reading: How to add Countdown Download Timer Button to Blogger, Sorry, my English is bad:)
