If you have a blogger blog and you have a very high bounce rate then this
article can help you to reduce your bounce rate. Now if you thinking about how
this article can help you to reduce the bounce rate of your blog then read this
entire article. In this article, I'm going to teach you how you can add
countdown timer lock content in blogger blogs.
So if you know anything about timer lock content in blogger then see a demo by
clicking on the below demo button to see a demo (don't forget to click on the
Show Content button of that demo article).
Benefits of having countdown timer lock
Countdown content timer lock basically helps you to reduce your bounce rate
and increase your Adsense revenue. So users have to wait in your blog to get
any specified content or codes. Let's talk about looks it has a good-looking
button and SVG animation built-in with it, you can also change the animation
and button looks using CSS.
How to add countdown timer lock in blogger
To add this cool system to your blogger blog you have to add some codes to
your blogger theme. So before you going to add any codes to your theme, first
make sure to backup your theme. After that go open your theme in
edit HTML mode.
Now search for ]]></b:skin> and paste the following CSS
code above.
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;}Now add the following JavaScript just above to </body> tag. If you don't find it, probably it will be already parsed which is </body>.
<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>
That's done! 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> Easy way to add this into the post
So if you want to add this system more quickly then just copy the below code
and at this to the article in HTML view and make sure to change the content.
<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>
Post a Comment