How to Create Download Button with timer for blogger 2021

Hello, guys welcome you infinityblogger.in today we are going to learn that how to create a Download Button With Timer.

Download button with a timer

For those who don't know that what is download button with a timer, it's a normal HTML button but when you click on it, it will start a countdown or your decided time, after the countdown ends you can get your download link.

Why use the Download button with a timer

I really recommend you to use the download button with a timer, because this will help you to increase your Average engagement time, and if you are thinking that why Average engagement time is important if your website Average engagement time increase then it will also help you to increase your rank in google search engine.

How to create Download Button with Timer

It's very easy and simple to create a download button with a timer, you just have to follow the instruction given below..
So let's start.

• Go to blogger.com
• then click on themes
• then Edit HTML
• Now Find ]]></b:skin>
• Then Paste this CSS given below above ]]></b:skin>

CSS

 .Bg-93btn{background: #FFD62F; color:black; padding:8px; outline:none; border:0px; border-radius:5px; cursor:pointer;box-shadow:0 0 2px 2px #FFE000 ;}
 .Bg-94btn{background:#FFD62F; color:black; text-decoration:none; padding:8px; border-radius:5px; box-shadow:0 0 2px 2px #FFE000;}

• After that find </body>
• Then paste this JavaScript given below Above </body>

JavaScript

<script>
 function dosomethig(e){
 e.style.display = "none";
 var output = document.querySelector('#output');
 var i=15; //set the time
 setInterval(
 function(){
 output.innerHTML = "Please wait.. "+i;
 i--;
 if(i<=0){
 output.style.display = "none";
 var Bg94btn = document.querySelector('#Bg94btn');
 Bg94btn.style.display= "inline-flex";
 }
 },
 1000
 )
 }
 </script>

• In the end, Go to your Post where you want to add your Download Button With Timer
• Then Paste this HTML given below

HTML

<div style="text-align: center;">
 <button class="Bg-93btn" onclick="dosomethig(this)">Click Here</button>
 <div id="output"></div>
 <a class="Bg-94btn" href="http://bit.ly/3rane85" id="Bg94btn" style="display: none;">Download Now</a>
</div>

Hope this article helps you to make your blogging better.
Cre: https://www.infinityblogger.in/2021/04/how-to-create-download-button-with-timer.html