Join me on telegram! Button

DMCA

DMCA.com Protection Status
Home
Blog
Blogger
HTML

Adding a Countdown Timer for Contents in Blogger


Hi Welcome to Techy Shikari. Today I will show you a tutorial on Adding a Countdown Timer for Contents in Blogger. 

Think about if you are providing any downloadable file or code in your website, the timer will help you to decrease rhe bounce rates of your website and will also increase your ad revenue. 

You would probably have seen during surfing internet that some websites shows a timer for the download links so that the vistors will have to wair for a particular time , and when the timer finishesthe user / visitor is able to click or go to the download link or page.

Therefore, in this post I'll give a tutorial on Adding Countdown Timer For Content In Blogger which will help you to decrease bounce rate and at the same time will increase your ad revenue.

Advantages:

  1. Will decreasw your Bounce rate 
  2. Will help to Increase your AdSense revenue 
  3. User's will have to wait for some time for codes or download links.
  4. Better loadin animation
  5. You can add your codes, links, content etc.. to show after the timer finishes.

Let's Start

Adding Countdown Timer for Content in Blogger

Step 1: Head towards your Blogger Dashboard.

Step 2: In menu of blogger dashboard, click Themes.

Step 3: Click the down arrow icon which is next to 'customize' button.

Step 4: Head to Edit HTML, you will get to the theme editing page.

Step 5: Now search in the code the code ]]></b:skin> and paste the below CSS Codes just above to it.

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

Step 6: Now add the below JavaScript just above to </body> tag. If you are not able find it, may be it will be already parsed which is &lt;/body&gt;.

     <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 changes by clicking

Step 8: Now you are done with the theme editing! Add the below HTML Codes in the post in which you have to add countdown timer, through HTML View to add Countdown Timer Box.

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

This is the Simple way to add Countdown Timer for Content 

If you are going to use this Countdown Timer only in 1-2 posts you can copy the below codes and directly add it in your Post's HTML View, rather than adding in Theme XML.
But I'll recommend to follow the above steps and add in the theme XML, so that everytime you won't have to copy this long code. 
 

 <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 post I have given a tutorial on Adding a Countdown Timer for your Content in Blogger. 

Rate this article

Getting Info...

Post a Comment