How to Add a Download Countdown Timer on Blogger

 A download countdown timer can significantly improve user interaction on your Blogger site. This guide will teach you how to add a unique countdown timer that activates upon clicking the download button, enhancing user experience and encouraging quick action.

Why Add a Countdown Timer?

A countdown timer:

• Enhances User Interaction: Engages users by adding a dynamic element to the download process.
• Creates Urgency: Encourages users to act quickly, increasing conversion rates.
• Improves Functionality: Adds a professional feature to your blog.

---

Video Tutorial Related to This Topic

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

Creating the Download Button

Step 1: Login to Blogger dashboard then go to Themes.

Step 2: Click on the icon next to the Customize button.

Step 3: Now search for /b:skin inside your code and paste the code below above it.

.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:#ff0033;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}
.dlBox .fileType.lazy {background-size: cover;background-position: center;background-repeat: no-repeat;}
.wcTargetLink{display:none} 
/* siteguide.xyz */
@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}} 
/* DarkMode */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)} 

Step 4: Now copy the following code and paste it above </body> tag in your template

<script>
//<![CDATA[
// dwonload countdown timer | siteguide.xyz
var timeLeft = 10; //waiting time 
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='Please Wait <span>'+timeLeft+'</span> seconds...',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

Step 5: Click the icon to save the changes.

How to use the Countdown Download Timer

We are done with setting up the template. Now create a new post and place the following code where you want to show up your download button.

<div class='downloadInfo'>
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<span class='textd'>file.zip</span>
<span class='fileSize'>512kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='wcTargetLink'>https://www.siteguide.xyz</div>

Conclusion

By implementing these steps, you can add a unique download countdown timer to your Blogger site, enhancing user engagement and creating a professional feature. Experiment with different styles to suit your blog's design and improve user experience.