Hello everyone! Welcome to Blogger rule. Today, take this opportunity to learn how to add a countdown timer to your content in Blogger.
If you provide downloadable code or files on your website, this countdown timer will help you reduce the bounce rate of your website and increase your revenue.
Some websites show a delay before the file download or code appears, so visitors have to wait for some time after the time expires before they can use the code or download the file from the link.
So, today we gonna to create a countdown timer for content on Blogger. You can use it on your blogger website.
So let's get started :)
How to add Countdown Timer for Content in Blogger :
Step 2: On Blogger Dashboard, click Theme
Step 3: Now go to theme section of blogger website.
Step 4: Now forward to Edit html mode in dropdown arrow.
Step 5: Now search for the code
]]></b:skin>and add following code above it.
Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center
Step 6: Now add some JavaScript just above to
</body> tag.
<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 click on save button.
Step 8: Now Add the following HTML Codes in your Blog Posts through HTML View to add Countdown Download 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>
Conclusion:
In this article, I have prepared instructions on how to add a countdown timer to your Blogger content. Users have to wait for the encoder or download link until the time expires, so it is better to reduce the bounce rate of your website.
