الصفحة الرئيسية
المشاركات

How to Create Download Button with Timer in blogger 2022

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

Contents  show 

Download Button with Timer

For those who don’t know that what is the download button is 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 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 increases 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>
  • At last, Go to your Post where you want to add your Download Button With Timer and 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>

That’s All. Enjoy.

Hope this article helps you to make your Blogging Better.

إرسال تعليق