How to add a Countdown Timer for Content in Blogger

Zahid Iqbal
8 Jul, 2023


How to add a Countdown Timer for Content in Blogger 

Today, I will Guide you on How to add a countdown timer for Content in Blogger. This feature can be highly advantageous if you offer Downloadable files or codes on your Website, as it helps Reduce Bounce Rates and increase Revenue.


Many websites utilize Countdown Timers Before displaying Links for Downloadable files or Codes, requiring visitors to wait for a specific duration before accessing the Content.


Features of This Widget

To achieve this on your Blogger website, we will create a custom Countdown Timer Widget. This widget offers Several Benefits, including

 ⭐ Reducing Bounce Rates

⭐ Animated SVG Loading Feature

⭐ Boosting AdSense income

⭐ Enforcing a waiting Period for visitors before they can access Codes or Download Links.

code
div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Download</button> </div>
  <div id="element-show" target="_blank">
  <div class="content">
    <a class="button download yellow" href="javascript:;">Download</a>
    </div> 
  </div> 
    <script>var id,counter=15,downloadButton=document.getElementById("element-show"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){--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 60 60'style='width: 30px; height: auto;' 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>
  .button,Cnt-Timer{display:inline-flex;font-family:var(--fontB)}Cnt-Timer{font-size:13px;opacity:.8;align-items:center}.button{align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:3px;line-height:20px;color:#fffdfc;background:#990000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>

How to Add Countdown Timer Button in Blogger Post?

To add the Countdown Timer Button to your Blogger Post, simply Copy and paste the provided Code into the HTML view of your post and publish it. The code includes a Button and the necessary JavaScript functions to initiate the countdown and display the Content once the timer expires.


By implementing this Countdown timer on your Blogger website, you can improve user engagement, generate more revenue, and enhance the overall user experience.


Zahid Iqbal

Zahid Iqbal

Zahid Iqbal is a Blogger, Content Writer, SEO Expert, YouTuber, and Digital Content Creator.

Next Post Previous Post
No Comment
Add Comment
comment url