How to Add Show Content after Countdown Timer?

Hello guys! How are you. I hope you are all good. Welcome Freemium Tech website's today's article. If you are looking how to show content after Countdown Timer? So this post just for you.

How to Add Show Content After Click Countdown Timer Button?

What is Show Content After Countdown Timer?

Commonly you might have gone over sites which says Download will begin later "Y" seconds. You need to hang tight for "Y" number of seconds before the document you need gets consequently downloaded. Show Content after Countdown Timer button is exact same thing. After click Show Content button you have to need wait for some time to read that content. It is reduce bounce rate of your website. It is also beneficial for increase your Adsense earning.

Why Should you add Show Content after Countdown Timer in Blogger?

There are a few advantages of Show Content after Countdown Timer Commencement Clock button, really look at them below.

Assuming that your site is facilitated on Google Blogspot and you give content records than you ought to consider adding this countdown Timer Commencement Clock button.
This gadget will assist you with essentially lessening the bob rate which will decidedly affect Web optimization of your blog.
After effectively carrying out this gadget you will see that your Adsense income has begun expanding as this gadget permits to show immense presentation Advertisements on the article page.
This gadget additionally assists clients as the record they with needing will be content naturally, they don't have to visit outsider locales to read the document.

How does Show Content after Countdown Timer Works?

Show Content after Countdown Timer is a JS-based lightweight module for Blogger. Prior it was accessible just for WordPress yet presently you can introduce it on Blogger too. This module utilizes Javascript to empower clock capability and HTML labels to show Promotions and record content.

So without wasting important time let's check How To Add Show Content after Countdown Timer For Blogger?

Before Add this let's see a preview

Demo

How To Add Download Countdown Timer For Blogger?

Important!
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

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> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>

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

Step 6: Find the tag </body> or some template will be </body> and add the JavaScript below and above it.

<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 html changes by clicking on Save icon.

Step 8: Then go to the page/post or place which you want to add Countdown Timer.

Step 9: Then if you are doing this in page/post then In post editor view, click icon at the bottom right of the title. Two options will appear: HTML view and Writing view, Select HTML View.

Step 10: Now paste the following HTML code to that place.

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

You can change html texts as you want in the code box!

Step 11: Then Save or Publish.

Simple way to add Countdown Timer for Content

In the event that you going to utilize this Commencement Clock just in 2-3 posts you can undoubtedly duplicate the underneath codes and straightforwardly add it in your Post's HTML View, as opposed to including Subject 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 shared with you How to Add Show Content after Countdown Timer? I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

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.