Cómo agregar un semáñador de cuenta regresiva en Blogger
<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}
button#Cnt-Timer-TD {
display: inline-block;
height: 31px;
background-color: #00A3FE;
font-family: var(--body-font);
font-size: 14px;
color: #ffffff;
font-weight: 400;
line-height: 31px;
text-align: center;
text-decoration: none;
cursor: pointer;
padding: 0 15px;
margin: 0 5px 5px 0;
border: 1px solid rgba(0,0,0,.1);
border-bottom-width: 2px;
border-radius: 2px;}
</style>
Sestro Here