How to Add a Countdown Timer for Content in Blogger.
Hello everyone! I'll explain how to add a countdown timer for content in Blogger today.
This countdown timer will be highly beneficial for you if you offer any codes or downloadable files on your website because it will lower your website's bounce rate and help you generate more cash.
Some websites display a countdown timer before the links for downloadable files or codes appear, requiring visitors to wait for a certain amount before using or downloading the files from the links.
Therefore, today we're going to create a Countdown Timer for Content in Blogger that you can use on your website to improve revenue and decrease bounce rates, among other things.
Features of this Widget
- Decreases your bounce rate
- Boost your AdSense income
- Users must wait until the countdown expires before receiving codes or downloading links.
- Animation SVG loading
- After the countdown expires, you can add any of your scripts, links, material, etc. to display.
How to Add Countdown Timer Button in Blogger Post?
If you're only going to use this countdown timer in every post you want then you can quickly copy the codes below and paste them into your post's HTML view and publish it...
div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Download</button> </div> <div id="element-show" target="_blank"> <div class="content"> <a class="button download yellow" href="javascript:;">Download</a> </div> </div> <script>var id,counter=15,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:#990000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px} </style>
I've included a tutorial on how to add a countdown timer for content in Blogger in this article. You may use THIS on your website to improve income, lower bounce rates, etc. Users must wait for codes or download links until the timer expires, hence it is preferable to lower your website's bounce rate.
Please feel free to post any code-related queries or issues in the comments or join our Telegram group for discussion.
Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.