Hi Friends, Welcome to our TechandFunZone Official blog. Let's see "How to make Download Box with Countdown Timer". Assuming you are giving any document on your Site to download, this Download Box will be useful for you. Before the download begins, some websites display a countdown or redirect to the final destination. If you want to use this Download Box with Countdown Timer, Please Follow this Article On how to set up a Download Box with Countdown Timer on your Website.
Short Talk
If you do blog and use the Blogger platform for your blog, Your blog is also a download blog. Therefore, you must have believed that you ought to also earn a respectable amount at some point from Adsense. As a result, Download Box with Countdown Timer is used by these bloggers. This ensures that people will remain on your blog for the specified amount of time. so that you can also control your bounce rate.
What is Download Box with Countdown Timer in Blogger
For those who don't know what is the Download Box with Countdown Timer, it's a normal HTML button but when you click on it, it will start a countdown or your decided time, after the countdown ends, the user can get their download link. The Download Box with Countdown Timer shows the box design and its Responsive Style. This Download Box with Countdown Timer is working fine in all blogger templates and in most browsers. Also, you can edit the stylish, color, or download timing in this script.
Why You Should use Download Box with Countdown Timer in Blogger
I really recommend you use the download button with a timer, because this will help you to increase your Average engagement time, and if you are thinking that why Average engagement time is important then I have to tell you that if your website's Average engagement time increases then it will also help you to increase your rank in google search engine.
Advantages & Disadvantages of Stylish Download Timer
This download timer has some Advantages and Disadvantages on this download timer Script. Let's Figure it Out.
Pros
- 100% Responsive Design
- Mobile Friendly
- Small space takes to your website
- User Friendly
- Increase your Ad Clicks
- Increase CTR on your Website
- Highly Customizable
- Increase website PageViews
- Increase Your Earnings
Cons
- Loading Time was Increased
- May not work Perfectly on Some low-level Websites.
Demo of Download Box with Countdown Timer in Blogger
Let's take a look at its demo before we begin.
How to Setup Download Box with Countdown Timer in Blogger
Attention!
Before customizing or making any changes to your template, it is strongly suggested that you back up your existing template so that you can restore it if something wrong happened.
Because I have already created it for you, creating a Countdown Download Box for your Blogger website won't require much knowledge of HTML, CSS, or JS. Implementing the codes correctly in your Blogger Theme XML is what you need to do.
- Log In to your Blogger Dashboard
- Now, Go to the Theme Section and Click on Edit HTML Option
- Next, Copy the JavaScript From Below
- Next, Find </body> Tag and Paste JavaScript Above on </body> Tag.
- Next, Find ></head> Tag on Blogger Template and Paste the CSS Code Above on ></head> Tag.
- Now Copy this CSS Script and Paste It.
- 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.
- Publish the Post or Page
- Open your Post or Page and check, bingo!! You’ve done it.
/* Countdown Download Script by Tech and Fun Zone */
<script type='text/javascript'>
//<![CDATA[
var timeLeft = 15;
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.techandfunzone-targetlink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <techandfunzone-colour>'+timeLeft+'</techandfunzone-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.
<style>
/* Countdown Download Box by Tech and Fun Zone */
.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 > *{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}
.techandfunzone-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}}
techandfunzone-colour{color:#00ff17;font-size:1.5em;font-weight:bold}
</style>
<!-- Download Timer Script - Provided by Techandfunzone.in-->
<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='techandfunzone-targetlink'>Put_Link_Here💡</div>
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
I really hope this Article How to make Download Box with countdown timer in Blogger is handy for all of you. If you want more information similar to what's in this article. For updates, please subscribe to our Telegram channel, Tech & Fun Zone.
If you have difficulty or any issue with this tutorial. Then you can actually ask me questions by commenting or by contacting us.
© Tech & Fun Zone