Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Countdown Timer in Blogger

Hello Everyone! Today on this occasion our tutorial is How to add Countdown Timer for Content in Blogger.

This countdown timer will be highly beneficial to you in lowering your website's bounce rate and boosting revenue if your website offers any codes or downloadable files. Before links to download files or codes appear on some websites, a countdown timer is displayed, forcing users to wait a certain amount of time before using the codes or downloading files from the links. We're going to create a countdown timer for content in Blogger today, which you can use on your website to lower bounce rates, boost sales, and other objectives.

Let's Begin

In Blogger, add a countdown timer for content.

Step 1: First of all Login to your Blogger Dashboard

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon  next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

  Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center} 

Step 6: Now add the following JavaScript just above to </body> tag. If you don't find it, probably it will be already parsed which is &lt;/body&gt;.

     <script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds 
var id,downloadButton=document.getElementById("element-show"),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... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
 /*]]>*/ </script> 

Step 7: Save the changes by clicking on this icon

Step 8: That's done! Add the following HTML Codes in your Blog Posts through HTML View to add Countdown Download Box.

 <div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
  <div id="element-show" target="_blank">
   
    <!-- Add your content here to show after the timer finish -->
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish<p/> 
    <a class="button" href="#" >Tutorial</a>
    
</div> 

Easy method for adding a countdown timer to content 

If you want to use this countdown timer for just one or two posts, you can just copy the codes below and put them straight to the HTML view of your post instead of adding them to the theme XML.

 <div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
  <div id="element-show" target="_blank">
   
    <!-- Add your content here to show after the timer finish -->
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish<p/> 
    <a class="button" href="" >Tutorial</a>

    
</div> 


    <script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds 
var id,downloadButton=document.getElementById("element-show"),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... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
 /*]]>*/ </script>


<style>
  Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center}
</style>

Go to Link

Go to Link