If You Want top backlinks or free guest posting on our blog Lets do it Join in Google News


How to add Countdown Download Timer Button to Blogger

How to add Countdown Download Timer Button to Blogger by Blogger Store
How to add Countdown Download Timer Button to Blogger
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}
@media screen and (max-width:480px){
.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.

// 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)});

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>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
<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:)

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It Look like there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.