How to add timer download button on Blogger | Add Download Button In Html

If you want to Add Timer Download Button in your blogger website then this post is perfect for you. If you're using blogger website you can add timer Download button which is not given by blogger host, I think you already knows that WordPress user can use the features easily because WordPress plugin is already given this features for free. 

Advantages Of Adding Timer Download Button—

So gyz if you mantain the bounce rate of your website then you can use this timer Download button. Because when you provide any link in your website the user of your site they can't read the full article they directly go to the Download link and directly Download the file. But the timer Download button added in your site the user of your site when they click on Download button they redirect another page and find a timer, when the timer is end they can download the file easily. And your audience retention is too much good.

Widgets Timer Download Button—

The widgets of countdown timer Download button is not available for blogger user but if you want to use this features you have to add some code {JavaScript, Css & Html} which is given below. You can easily add this code with the help of copy paste.

Let's Explain How To Add Countdown Timer Download Button—

So gyz Now I'm explain how to add this code in your site how it works Let's start—

Step 1

First you need to add JavaScript in your site And Css which is given below—

<style>
#downloadinfo {max-width:100%;margin:auto;box-shadow: 0 0 3px rgba(0,0,0,.12), 0 0 2px rgba(0,0,0,.24);border-radius: 3px;color:#fff;display: block;overflow:hidden;padding: 20px;text-align: center;box-sizing: border-box;background-color: #383c41}
#dgnfile{text-align: left;background-color: #ebebeb;font-size:18px;overflow: hidden;border-radius:3px;padding: 0} 
#downloadinfo .downx{height:49px}
#downloadinfo p{font-size:20px; line-height:35px;font-weight:700;margin:0px;height:49px}
.file-name, .file-size, .uploader {color: #333333; background-size: 20px;background-repeat: no-repeat;display: inline-block;padding: 6px 0 6px 40px;background-position: 10px}
.file-name{background-image: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M14,2H6C4.89,2 4,2.89 4,4V20C4,21.11 4.89,22 6,22H18C19.11,22 20,21.11 20,20V8L14,2M12,19L8,15H10.5V12H13.5V15H16L12,19M13,9V3.5L18.5,9H13Z&#39; fill=&#39;%2395b2f6&#39;/%3E%3C/svg%3E&quot;)}
.file-size{background-image: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M14,2H6C4.89,2 4,2.89 4,4V20C4,21.11 4.89,22 6,22H18C19.11,22 20,21.11 20,20V8L14,2M12,19L8,15H10.5V12H13.5V15H16L12,19M13,9V3.5L18.5,9H13Z&#39; fill=&#39;%2395b2f6&#39;/%3E%3C/svg%3E&quot;)}
.uploader {background-image: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z&#39; fill=&#39;%2395b2f6&#39;/%3E%3C/svg%3E&quot;);)
}
button:before {content: &#39;&#39;;background: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center no-repeat;display: inline-block;width: 24px;height: 24px;padding: 0;vertical-align: -7px;margin-right: 5px}
button {font-size: 18px;font-weight: 700;padding: 6px 10px;border: 1px solid #3b7d5f;background-color: #3b7d5f;color: #fff;border-radius: 3px}
      </style>

After copy this code open your blogger dashboard and  go to the theme section click on edit html and add this code After ]]></b:skin> Tag.

Before editing any HTMLcode, I suggest you that please backup your theme.

After adding added the Css, you to need add JavaScript before the /body tag

<script>
  //<![CDATA[
var downloadButton = document[_0x19d2[1]](_0x19d2[0]);
var counter =30;
var newElement = document[_0x19d2[3]](_0x19d2[2]);
newElement[_0x19d2[4]] = _0x19d2[5];
var id;
downloadButton[_0x19d2[7]][_0x19d2[6]](newElement, downloadButton);
function startDownload() {
  this[_0x19d2[9]][_0x19d2[8]] = _0x19d2[10];
  id = setInterval(function () {
    counter--;
    if (counter < 0) {
      newElement[_0x19d2[7]][_0x19d2[6]](downloadButton, newElement);
      clearInterval(id);
    } else {
      newElement[_0x19d2[4]] = _0x19d2[11] + counter.toString() + _0x19d2[12];
    }
  }, 1000);
}
var clickbtn = document[_0x19d2[1]](_0x19d2[13]);
clickbtn[_0x19d2[14]] = startDownload;
window[_0x19d2[15]] = function () {
  var _0x3c83x7 = document[_0x19d2[1]](_0x19d2[16]);
  null == _0x3c83x7 && (window[_0x19d2[18]][_0x19d2[17]] = _0x19d2[19]),
    _0x3c83x7[_0x19d2[20]](_0x19d2[17], _0x19d2[19]),
    _0x3c83x7[_0x19d2[20]](_0x19d2[21], _0x19d2[22]),
    (_0x3c83x7[_0x19d2[4]] = _0x19d2[23]);
};
//]]>
</script>

After adding the css and JavaScript you need to add HTML code which is given below, and this html code is too much important to add timer download button in your webpost.

 <div id='downloadinfo'>
  <div class='downx'><button id="dgnbtn">Get Download Link</button><a href="https://www.upmod.in/" id="download" class="button"><button>Download</button></a></div>
  <div id="dgnfile"><span class="file-size">File Name: Timer Download Button</span>
    <span class="uploader">Uploaded By: Surenjit Das</span><span class="file-size">File Size: 256kb</span> </div><a href='https://www.upmod.in/' id='downloadx' target='_blank'></a>
</div>

Copy all the above code and add this html code where you want to add timer download button.

Conclusion—

In this post i have shared with you how to add timer download button in blogger in easy way.  If you have any doubts about this tutorial feel free to ask me. 

Thank you!