How to Add a Countdown Timer for Content in Blogger.

The image shows that how to add a Countdown Timer for Content in Blogger.

Hello everyone! I'll explain how to add a countdown timer for content in Blogger today.

This countdown timer will be highly beneficial for you if you offer any codes or downloadable files on your website because it will lower your website's bounce rate and help you generate more cash.

Some websites display a countdown timer before the links for downloadable files or codes appear, requiring visitors to wait for a certain amount before using or downloading the files from the links.

Therefore, today we're going to create a Countdown Timer for Content in Blogger that you can use on your website to improve revenue and decrease bounce rates, among other things.

Features of this Widget

  • Decreases your bounce rate
  • Boost your AdSense income
  • Users must wait until the countdown expires before receiving codes or downloading links.
  • Animation SVG loading
  • After the countdown expires, you can add any of your scripts, links, material, etc. to display.

How to Add Countdown Timer Button in Blogger Post?

If you're only going to use this countdown timer in every post you want then you can quickly copy the codes below and paste them into your post's HTML view and publish it...

Just Hit Download Button To Download Code if not Copy!

Download Code

<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>   

I've included a tutorial on how to add a countdown timer for content in Blogger in this article. You may use THIS on your website to improve income, lower bounce rates, etc. Users must wait for codes or download links until the timer expires, hence it is preferable to lower your website's bounce rate.

Please feel free to post any code-related queries or issues in the comments or join our Telegram group for discussion.

Next Post Previous Post
No Comment
Add Comment
comment url
×