How to make Download Box with Countdown Timer in Blogger

Download Box with Countdown

Let's Do a Demo Here...! 

View Demo

File Name.zip 200kb

https://abdullahcoded.blogspot.com/p/privacy.html

Step 1: Go and login to your Blogger Dashboard

Step 2: In Blogger Dashboard, Go to Themes section

Step 3: Now, Go to the Theme Section and Click on Edit HTML Option.

Step 4: Next, Copy the JavaScript From Below

Step : Next, Find </body> Tag and Paste JavaScript Above on </body> Tag.

  /* Countdown Download Script by ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ */
  <script type='text/javascript'>
//<![CDATA[
var timeLeft = 15;
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.abdullahcoded-targetlink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <abdullahcoded-colour>'+timeLeft+'</abdullahcoded-colour> second.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});

//]]></script>

You can change the yellow marked part as per your need. e.g: 15= 15 sec waiting time.

Next, Find </head> Tag on Blogger Template and Paste the CSS Code Above on </head> Tag.
Now Copy this CSS Script and Paste It.

<style>
/* Countdown Download Box by ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ */
.downloadInfo{max-width:500px;background-color:#fefefe;box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff;border:2px 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{box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff}
  .downloadInfo .fileType{box-shadow: inset 3px 5px 10px #c0c0c0, inset -3px -5px 10px #fff;border: 2px solid rgba(255, 255, 255, 0.2)}
.downloadInfo a{background-color:#2bf625;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;cursor: pointer}
.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 &gt; *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo a:hover {
box-shadow: inset 3px 5px 10px #6aff57, inset -3px -5px 10px #46e141;
border: 2px solid rgba(76, 81, 76, 1);
}
.icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}
.abdullahcoded-targetlink{display:none}
  
.drK .downloadInfo{background-color:#111111;box-shadow: 2px 4px 11px #1f1f1f, -2px -4px 11px #000;border:2px solid #3f464b;border-radius:5px}
.drK .downloadInfo .fileType{background:#111111;color:#fefefe;box-shadow: inset 3px 5px 10px #1f1f1f, inset -3px -5px 10px #000;border: 2px solid rgba(31, 34, 38 0.2)}
.drK .downloadInfo .fileName{color:#fefefe;box-shadow: inset 3px 5px 10px #1f1f1f, inset -3px -5px 10px #000;
border: 2px solid rgba(31, 34, 38 0.2)}
.drK .downloadInfo a{box-shadow: 2px 4px 11px #1f1f1f, -2px -4px 11px #000;}

  /* Responsive layout */
@media screen and (max-width:600px){.downloadInfo{padding:12px}.downloadInfo a{width:50px;height:50px;border-radius:10px}.downloadInfo a:after{display:none}.downloadInfo a .icon{margin:0}}
abdullahcoded-colour{color:#00ff17;font-size:1.5em;font-weight:bold}
</style>

Save the Template by Clicking On this Icon .
Go to Post Area and Paste this HTML Code, where you want to put the Download Timer.
Next, Copy the HTML Code below and paste it.

<!-- Download Timer Script - Provided by abdullahcoded.blogspot.com-->
<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=''><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z"/></svg></a>
</div>
<div class='abdullahcoded-targetlink'>Put_Link_Here💡</div>

Publish the Post or Page
Open your Post or Page and check, bingo!! You’ve done it.

Alternative Method

• Directly Paste all Scripts into Single Post or Page
• It will Absolutely Work on Single posts.

Please replace the marked component as necessary. i.e:
zip with File Type
File Name with your File Name
200Kb with Size of File
Put_Link_Here with your URL.

Final Words

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

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