In this article, I have made an instructional exercise on How to add a Countdown Timer for Content in Blogger. which you can use on your site to decrease the Bounce rate.

Hello Everyone! Welcome back to PH Wizards. Today at this event our instructional exercise is The most effective method to add a Countdown Timer for Content in Blogger. 

Assuming that you are giving any Codes or Downloadable documents on your Website, this Countdown Timer will be exceptionally useful for you to decrease your site's Bounce rate and furthermore assist you with expanding your income.

A few sites show a commencement clock before the connections of Files to download or Codes show up so the guests need to sit tight for a specific time frame after the clock completes the guests can utilize the codes or download the documents from the connections.

So Today we will make Countdown Timer for Content in Blogger. which you can use on your site to decrease the Bounce rate and increment income and so forth.

Stars

1. Assists with lessening your Bounce rate
2. Increment your AdSense income
3. Clients need to sit tight for codes or download joins until the clock wraps up
4. Loading SVG animation
5. You can add any of your codes, joins, content, and so forth to show after the clock wraps up.

Let's Begin!

The most effective method to add Countdown Timer for Content in Blogger

Stage 1: Above all else Login to your Blogger Dashboard.

Stage 2: On Blogger Dashboard, click Theme.

Stage 3: Click the bolt-down symbolnext to the 'customize' button.

Stage 4: Click Edit HTML, you will be diverted to altering the page.

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

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

Stage 6: Presently add the accompanying JavaScript only above to </body> tag. On the off chance that you don't track down it, most likely it will be as of now 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> 

Stage 7: Save the progressions by tapping on this symbol

Stage 8: That is finished! Add the accompanying 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 the timer finishes. here you can add Buttons, text etc, anything which you have to show after timer finishes <p/> 
    <a class="button" href="#" >Tutorial</a>
    
</div> 

Straight forward method for adding Countdown Timer for Content

On the off chance that you going to utilize this Countdown Timer just in 1-2 posts, you can without much of a stretch duplicate the beneath codes and straightforwardly add it in your Post's HTML View, as opposed to including 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 finishes <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>