How To Add Countdown Timer Button In Blogger Post- Decrease Bounce Rate To Increase AdSense Revenue

Here we are going to learn about how to add countdown timer button in blogger post, countdown timer blogger, download timer script for blogger, countdown timer button html, download timer button, how to add timer download button in html, download timer html, timer widget.

 How To Add Countdown Timer Button In Blogger Post

  Follow Us  

Countdown Timer Button

Countdown timer button in blogger post will decrease the bounce rate, that means it the user will spend more time on your site and see more ads. 

Sometimes what happens users just come on your site and and see the content and immediately the leave that page, this will increases bounce rate, as the move immediately from your website they are not able to see all the ads or all the contents that are present on the site. 

Once you add this countdown timer button in blogger post that contains something unique but short query they will see a button and by pressing that button they were able to see the main content they want after the countdown overs. 

So this will increase the watch duration of the user on your page and within this time our site will loads all the necessary contents to be displayed to the user.

Add Countdown Timer Button

To add countdown timer button in blogger post follow the following steps

1. Go to blogger dashboard.
2. Go to post in which you want to add countdown timer button.
3. Switch to HTML view of the post.
4. To add default countdown timer button in blogger post copy the following code.

   <div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
     <div id="element-show" target="_blank">
       <!-- Your Content Here -->
   
   </p>
   </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>

5. To add customized countdown timer button in blogger post copy the following code.

   <div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">&nbsp;&nbsp;See Answer&nbsp;&nbsp;</button> </div>
     <div id="element-show" target="_blank">
       <!--Your Content Here -->
   
   <script>/*<![CDATA[*/
   var counter = 11; // 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/>Generating Answer.. </center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
    /*]]>*/ </script>

6. Paste this code in the blogger post in HTML view.
7. Now type or paste your content which you want to display after countdown just after "Your Content Here".
8. If you have copied custom countdown timer button code then you have to add the following code in your blogger html in CSS portion.

   .button {
   background-color: #25a186;
   border-radius: 25px;
   border:2px solid gray;
   color: white;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 25px;
   margin: 10px;
   cursor: pointer;
   }
   .button:hover{background:green}

Video Tutorial

Subscribe OnTeque