Home
Blogger Guide
Coding Guide

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

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

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.

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

  • Need coding knowledge to edit this countdown script.
  • If you make any mistake on the installation of this Script. the post or page may be crashed.

How to Add countdown timer for blogger website

  1. Go to your blogger dashboard and create a new post or page.
  2. Covert to Html Editing Mode on post or Page Dashboard.
  3. Now copy the Below Script and Directly paste it to your blogger website.
  4. If you want to see the Source please click the below button.



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

if you're going to add content to hide this section please add it inside of the below section. 


<div class="content">
Write your content....
</div>

Final Words

I hope this countdown timer with content hider script is very helpful to you. If you want more blogger notifications like this please follow my google New Page or Telegram Channel. Thank you for Reading...

Post a Comment