How to Add Countdown Timer Button in Blogger

Countdown Timer Button

   View Demo

Add Countdown Timer Button In Post:

Its very easy to implement on blogger just follow below steps to add script in your blogger template:

Step 1: First of all Login to your Blogger Dashboard.

Step 2 : Click on Edit Html Tab

Step 3 : Search for ]]></b:skin> and copy the below css code and paste it just above ]]></b:skin> code.

Just Click / Tap to Copy below Code

.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}
.absTargetLink{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)}

Step 4 : Final step copy the below javascript and place it just above the </body>tag and hit the save button.

Just Click / Tap to Copy below Code

<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('.absTargetLink').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>

The number 10 in the code above is the time parameter (seconds) for the destination link to display, you can change it to be faster or slower. You can also customize the time text that appears by changing the ' Link will appear in ', ' second ' section

How to add countdown timer button in blogger post

Step 1 : Go to Blogger Dashboard.

Step 2 : Click on Posts and Create New Post

Step 3 : Change mode from Composer view to HTML View 

Step 4 : Copy below html code & paste it where you want to add download button

Step 5 : Don't forget to copy the url/link of the file you created earlier and replace the url " https://your_blog_address.com/.html " that has been tagged, with the url of your download button.

Just Click / Tap to Copy below Code

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

Finally, we hope this article can help you to understand “How to add Download button with Countdown timer in Blogger”. If you really think this article helps you then don’t forget to appreciate our efforts in the comments below. For more blogging tutorials, stay connected with us.

You May Like These Posts:

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ