A countdown timer button is useful for websites that let people download things like music, apps, or eBooks. Do you want to add a countdown timer button in your blog? Then you are in the right place.
In this guide, I’ll show you how to put a countdown timer button on your Blogger site. This button can make your website better for people and might help it rank higher on Google.
Usually, people quickly get what they want and leave, which can make your site look bad to Google. But with a timer button, you can make people wait for a short time before they can download. This can keep them on your site longer, which Google likes.
Table of Contents
What is countdown timer
The countdown timer button is a feature you find on many websites where you can download things. Instead of instantly giving you the download, it makes you wait a bit. There’s a timer showing how much time is left, and when it’s done, a button or link shows up. Then, you can click to start the download. It’s kind of like a little game of waiting before you get what you want from the website.
Benefits of using countdown timer button
Reduce Bounce Rate:
When people click the download link, a timer shows a countdown before the download starts. This keeps them on your page for a certain amount of time (like 20-30 seconds) while they wait. This helps reduce the bounce rate, making your site more efficient.
Improve Search Engine Ranking:
Search engines, such as Google, observe how users use websites. A load timer tells Google that visitors are spending more time on your page, which can move your site higher in search results.
Encourage Students:
Being able to download will make visitors check out your content more. The timer pushes them to read your articles completely before going to download, which makes them more engaged overall.
Countdown timer button Script for blogger
<div style="text-align: center;"><a class="button" id="Count_Time">View Content</a> </div>
<div id="Stop_Timer" target="_blank">
<!--Put you download link or content below-->
<p class="cnt-button">Click the Button Below to Download</p><p class="cnt-button">
<a class="button" href="#">Download</a>
</p><p> </p></div>
<style>
Cnt-Timer{font-size:16px;opacity:.8;display:inline-flex;align-items:center}
Cnt-Timer svg{width:20px; height:20px;}
.cnt-button{text-align:center;}
.button{
background: #2a78d2;
padding: 10px 25px;
border-radius: 5px;
color: #fff !important;
box-shadow: 0px 0px 2px #000;
}
</style>
<script>/*<![CDATA[*/
var counter = 10; // Add time here in seconds
var id,downloadButton=document.getElementById("Stop_Timer"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating Link... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script> How to add countdown timer button in blogger post
Let’s see how to add this button to your Blogger site:
First, make sure to save a copy of your Blogger theme. This way, if something goes wrong, you can go back to how it was before.
Now, let’s get started with adding the countdown timer button:
Step-1: Login to you blogger dashboard
Step-2: On the left sidebar of the dashboard click on Theme and then click on the HTML editing option from customize
Step-3: Copy the CSS property from below and paste it above the ]]></b:skin>
Cnt-Timer{font-size:16px;opacity:.8;display:inline-flex;align-items:center}
Cnt-Timer svg{width:20px; height:20px;}
.cnt-button{text-align:center;}
.button{
background: #2a78d2;
padding: 10px 25px;
border-radius: 5px;
color: #fff !important;
box-shadow: 0px 0px 2px #000;
}Step-4: Copy the JS script from below and paste it above the </body>
<script>/*<![CDATA[*/
var counter = 10; // Add time here in seconds
var id,downloadButton=document.getElementById("Stop_Timer"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>Please wait <span>"+counter.toString()+"</span> seconds</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> Generating Link... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script> Now copy the countdown timer HTML tag and you need to place it in the post or page where you want to add the countdown timer button in blogger.
<div style="text-align: center;"><a class="dwn-button" id="Count_Time">Show Content</a> </div>
<div id="Stop_Timer" target="_blank">
<!--Add your content here to show after the timer finish-->
<p class="cnt-button">Click the Button Below to Download the File.</p>
<br>
<p class="cnt-button">
<a class="dwn-button" href="Your Download Link Here">Download</a>
</p>
<br><p> Your text here </p></div>You can put the download link a tag or text inside the p tag that you can see as bold text above.
If you have put all the scripts you are done and when you will view your post or page content it will show a button like picture no 1 below. After clicking the content button the countdown timer will start counting down. After finishing the counting it will show the download button or text like image number 3.
1
2
3
By default the countdown time is set to 10 seconds. You can change it from var counter = 10;
Final Words
In summary, adding countdown timer button in blogger post make a blog more effective by keeping people on the page longer, which is good for search engines. This feature can reduce the bounce rate and make the blog appear higher in search results.
If your site has low content and provides downloadable content then using timer button will be useful for you. But using it in a post can sometimes annoy your visitor. You can try different ways to add a countdown timer, make sure it works well and entertains the visitors. Overall, using a timer button can make a blog successful by keeping readers engaged.
