How to Add Timer Download Button to Blogger 2023? (Updated Code)

Do you want to add a countdown timer to your website? It’s not hard. It serves two purposes: First, it sets your readers in the right mood to read your content. Second, It sets the expectation that what they are getting is worth waiting for.

I’ll teach you how to add a timer download button on blogger 2023? Bloggers are always looking for ways to increase their conversion rates. One way to do this is by adding a timer download button to your blog post.

Adding a countdown timer download button to your blog can prove to be a helpful tool. Bloggers use countdown timers to encourage posting frequency and add suspense to their blogs. While using a countdown timer can increase engagement with your followers, it can also be a great incentive for blogging regularly.

What is a Timer Download Button?

The timer download button on blogger is a blogger script to help bloggers make more money. When the user clicks the timer download button, it will automatically redirect to a download page.

Download button countdown timer is an HTML script that allows your visitors to download files that are available on your website. This feature is useful for many website owners to Decrease Website Bounce Rates.

When anyone clicks the download button then it takes some time before the link appears and users stay on your site for while. After the time up a Goto Link to download buttons appears and start downloading items.

For Blogger we can also use a timer to download files with help of javascript, the download button will automatically appear after the time is up.

What is the benefit of using timer download buttons on blogger?

I will explain what are the features of the timer download button.

• It helps to reduce the bounce rate of your site.
• Look give like WordPress style and professional feel.
• They read your full articles before downloading.
• It helps to rank your post fast.
• Increase the popularity of their blogs.

Before Create Button let's see the demo and clear your suspense.

Demo

How to add a download button on the blogger website with a countdown timer 2023.

It is so easy to implement the new script. You just need to follow some steps mentioned below.

• Go to Blogger Dashboard and select Theme Section
• Then Click Take of Backup and Click Edit Html
• Copy Below CSS Code and Paste it just above the ]]></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}
.twtTargetLink{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 adjusts the class if it is different or removes this section */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}

At the end just copy below Javascript code and paste it above the </body> tag and click save the template.

<script>
//<![CDATA[
// dwonload countdown timer by the web trick 
var timeLeft = 10; //Set the time here
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.twtTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please Wait <span>'+timeLeft+'</span> Sec.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

Add Download Timer Script on Blogger Post with the file name and author detail.

• Click on Post or Page
• Change To Html View
• And Copy the Below Html Code and paste where you want to add the button in your post.

<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='twtTargetLink'>https://your_blog_address.com/.html</div>

I hope this article is helpful for you to learn about the countdown timer mechanism. In the future, I may give a new tutorial on how to add a download timer with file name. Just stay tuned.