If you are looking for how to add a Countdown Timer For Content On the Blogger website then this post is just for you.
I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.
We only used then HTML, CSS and JS. Are you upset about your website speed? do not worry it doesn't affect your website speed.
Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
Assuming you are giving any Codes or Downloadable records on your Site, this Commencement Clock will be extremely useful for you to diminish your site's Bob rate and furthermore assist you with expanding income.
A few sites shows a commencement clock before the connections of Documents to download or Codes show up so the guests need to hang tight for a specific time frame after the clock completes the guests can utilize the codes or download the records from the connections.
What is Download Countdown Timer?
Commonly you might have gone over sites which says Download will begin later "X" seconds. You need to hang tight for "X" number of seconds before the document you need gets consequently downloaded and the download page likewise shows many huge presentation Advertisements.
These sort of pages utilizes Download Commencement Clock gadget due to which you need to hold on to have the option to download the mentioned record
Why Should you add Download Countdown Timer in Blogger?
There are a few advantages of Download Commencement Clock Gadget, really look at them underneath:
- Assuming that your site is facilitated on Google Blogspot and you give Downloadable records than you ought to consider adding this Download Commencement Clock Gadget.
- This gadget will assist you with essentially lessening the bob rate which will decidedly affect Web optimization of your blog.
- After effectively carrying out this gadget you will see that your Adsense income has begun expanding as this gadget permits to show immense presentation Advertisements on the Download page.
- This gadget additionally assists clients as the record they with needing will be downloaded naturally, they don't have to visit outsider locales to download the document.
How does Download Countdown Timer works?
Download Commencement Clock is a JS-based lightweight module for Blogger. Prior it was accessible just for WordPress yet presently you can introduce it on Blogger too. This module utilizes Javascript to empower clock capability and HTML labels to show Promotions and record download URL.
So without wasting important time let's check How To Add Download Countdown Timer For Blogger 2022 ?
You can see the demo here:-
How To Add Download Countdown Timer For Blogger 2022
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>
Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center} Step 6: Find the tag </body> or some template will be </body> and add the JavaScript below and above it:
<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 html changes by clicking on this icon
Step 8: Then go to the page/post or place which you want to add Countdown Timer
Step 9: Then if you are doing this in page/post then In post editor view, click icon at the bottom right of the title.Two options will appear: HTML view and Writing view, Select 'HTML View'.
Step 10: Now paste the following HTML code to that place
<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>
You can change html texts as you want in the code box!
Step 11: Then Save or Publish.
Simple way to add Countdown Timer for Content
In the event that you going to utilize this Commencement Clock just in 1-2 posts you can undoubtedly duplicate the underneath codes and straightforwardly add it in your Post's HTML View, as opposed to including Subject XML.
<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>
Terms of Use
To appreciate our workshop, consider keeping the credits in canons.
We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.
Conclusion
Hope this How To Add Download Countdown Timer For Blogger 2022 article will be useful to you, If you have any dubieties or facing any issues while installing it also you can ask me in the comment, Do share with your musketeers, Thanks for visiting, Have a nice day!
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved
© Copyright:
www.the-pro-project.blogspot.com
Source:
www.techydarshan.in