How to Add Show Content after Countdown Timer? in Blogger Site

Content after Countdown Timer

View Demo

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

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ