In this article I have made a tutorial on How to add Countdown Timer for Content in Blogger

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

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

If you are providing any Codes or Downloadable files on your Website, this Countdown Timer will be very helpful for you to reduce your website's Bounce rate and also help you increase revenue. 

Some websites shows a countdown timer before the links of Files to download or Codes appear so the visitors have to wait for a particular time after the timer finishes the visitors can use the codes or download the files from the links.

So Today we are gonna make Countdown Timer for Content in Blogger. which you can use in your website to reduce Bounce rate and increase revenue etc.

Pros

1. Helps to reduce your Bounce rate 
2. Increase your AdSense revenue 
3. User's have to wait for codes or download links until the timer finishes
4. Loading SVG animation
5. You can add any of your codes, links, content etc.. to show after the timer finishes.

Let's Begin

View Demo

How to add Countdown Timer for Content in Blogger

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 </body>.

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

Simple way to add Countdown Timer for Content 

If you gonna use this Countdown Timer only in 1-2 posts you can easily copy the below codes and directly add it in your Post's HTML View, rather than adding in 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>   

Conclusion

In this article I have made a tutorial on How to add Countdown Timer for Content in Blogger. which you can use in your website to reduce Bounce rate and increase revenue etc. User's have to wait for codes or download links until the timer finishes so its a better idea to decrease Bounce rate of your website.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright Techydarshan.in

Go to Link