How to add Countdown Timer for Content in Blogger | Content Hider Script with Countdown | Pixabin Offical

4 min read

Hi dudes, welcome to our Pixabin Official Blogger Tutorial Blog. Let see about the Content hider script. This script mostly helps to hide something on your website. 

For example, Mant more Educational sites have shown the few contents directly with the lastly add read more option. Users can click the read more option Website shows Countdown Timer after the Countdown Timer Finished Content was shown to the user. This method very helps full to manage the visiting time on your Website.

Table of Contents

What is a Countdown timer for content?

This looks like a countdown timer. this is very helpful to hide something on your websites, like content, buttons, and images. So, can not see these hide things directly. User can want to see if they want to click the button and wait a few seconds.

Pros and Cons Of Content timer for a content script?

Pros

• Increase the Reading of users.
• Increase ad click on your website
• Also, you can do this thing on the download timer
• Give the pro look

Cons

How to Add countdown timer for blogger website

<div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
  <div id="element-show" target="_blank">
  <div class="content">
Write your content....

</div>
   
  </div> 


    <script>var id,counter=10,downloadButton=document.getElementById("element-show"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){--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 60 60'style='width: 30px; height: auto;' 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>
  .button,Cnt-Timer{display:inline-flex;font-family:var(--fontB)}Cnt-Timer{font-size:13px;opacity:.8;align-items:center}.button{align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:3px;line-height:20px;color:#fffdfc;background:#ff09ff;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>

Video Guide

Custom modification

If you want to change the time limit edit counter=10 on the script.

Related Posts

See also