How To Add Countdown Timer Download Button In Blogger

How To Add Countdown Timer Download Button In Blogger

Are you looking to create a Countdown Timer Download Button in your Blogger. in this post we are going to know how to Add Countdown Timer Download Button in Blogger.

How to Add Countdown Timer Download Button Code

Step 1: Log in to your Blogger account, then click on Theme ➤ Edit HTML.

Step 2: Click on HTML Box  ➤ Then find </head>  tag, Using CTRL + F.

CSS of Download Button

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#FF0000;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#FF0000;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>

Step3: Copy the CSS code which is given above ➤ then paste the code above of </head> tag.
Step4: After paste the CSS, find the </body> tag Using the CTRL + F.

Javascript of Download Button

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=20,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>


Step5:  Copy the Javascript code which is given above ➤ then paste the code above of </body> tag.
Step6: After paste, the Javascript ➤ Click on Save Theme

HTML of Download Button

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Your File Name</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="button small download"></i> download</button> <a href="https://www.Your Download Link.com" id="downloadx" style="display: none;"><i aria-hidden="true" class="button small download"></i>Downloading</a><div style="text-align: left;">
File Size: xx MB</div></div></div></div>


 Step7: Copy this HTML code which is given above ➤ Go to your blog post ➤ Click on HTML ➤ Paste this HTML code in your post.

Note: When you use this download button, do not click on the compose button after adding this code in your post, otherwise this download will not work.

I hope you understand how to add Countdown Timer Download Button code in the blogger. If you want to know more about coding, SEO and what you need to learn, you can comment below we will try to post the tutorial as soon as possible.

You might like

5 comments

  1. Request post by me😍😍 thank you bilimtook

    ReplyDelete
  2. Here is something eror if i place my css there is a extra option (==>) like that...How to solve and plz share a table option like your pdf download option

    ReplyDelete

Post a Comment