How to add Download Box Button with Counter

How to add Download Box Button with Counter

If you want to add a download bo to your blog that will enhance the look of your blog. So this post can help you a lot. To add a download box button to your blog.


This download box comes with a counter which helps in reducing your bounce rate. You can manage the time of this counter by yourself. As soon as the counter time runs out. The file starts downloading automatically. In this download box, you have also given the option of title, file name, file size and short description. Which you can edit and change according to yourself.

Let’s start step-by-step guide:

How to add Download Box Button with Counter
Before adding this widget, check that your blog has fontawesome already installed. If not, then you have to add the code

1.Steps:
  • First, you need to open Blogger.
  • Then Select the Theme Menu and Click On the Edit HTML Button.
  • Then Search (Ctrl + F) </head> or &lt;/head&gt;&lt;!–<head/>–&gt;
  • Then you have to add the code before </head> or &lt;/head&gt;&lt;!–<head/>–&gt;
  • Click Save Theme.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Add this CSS code before </head>

2.Steps:

  • Select the Theme Menu and Click On the Edit HTML Button.
  • Then Search (Ctrl + F) </head> or &lt;/head&gt;&lt;!–<head/>–&gt;
  • Then you have to add the CSS code before </head> or &lt;/head&gt;&lt;!–<head/>–&gt;
  • Click Save Theme.
<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#5480fb;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#1f51db;color:#fff;outline:none}.limit-downx{display:block;margin:0 auto;border-radius:4px}.In-downx{background:#5480fb;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}.Note-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:#5480fb;float:right;text-align:center;font-size:14px;text-transform:capitalize}.wrap-info span{display:inline-block;line-height:38px;float:right}.file-description{display:block}.file-descriptionspan{margin-right:3px}
@media screen and (max-width:640px){.limit-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}.wrap-info span{float:none;width:100%;text-align:center}.file-description{text-align:center}}
</style>

Add this code before </head> or it can also be added before </body>


3.Steps:

  • Select the Theme Menu and Click On the Edit HTML Button.
  • Then Search (Ctrl + F) </head> or it can also be added before </body>.
  • Then you have to add the code before </head> or </body>
  • Click Save Theme.

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,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'/> The file will be downloaded in "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>


You can also change the countdown time according to your needs, by changing the red text as well as you can change the text according to your need.

Now, to add the download box, add the code below in the HTML tab of your post.

<div class="limit-downx">
<div class="In-downx">
<div class="wrap-info">
<div class="file-info">
Title
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="Add Download Link Here" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Again</a>
</div>
<div class="file-description">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Newspaper WordPress Theme</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 30MB</span>
</div>
</div>
<div class="Note-downx">
If it is not automatically downloaded, please click Download again. And if the link is broken, please report it via the Contact Form page of this blog.
</div>
</div>

Put the title of your file in the title. Put the size of the file in the file size and write the short description of your file in the description.

You need to edit:
  1. Add Your File Name On  Name File
  2. Add Your Download Link On linkdownloadx
  3. Do Not Change Recommended If it doesn't download automatically, please click Download again. And if the link is broken, please report via the Contact Form page of this blog.


Previous Post
Next Post

post written by:

0 Comments: