Blogger TipsHow to

How To Add Download Button In Blogger

Add Download Button In Blogger Maybe you often see the download button which will automatically give a countdown time when we click and after the time is finished it will usually open automatically to the page or directly download files provided by the site. So even with the tips on Installing the Download Box Button with Counter, I will share this concept more or less the same.

add download button in blogger
add download button in blogger
The reason why installing the download box with counter buttons is one of them is to reduce the rate of Bounce Rate of our blog when visitors visit the page.

Okay, without lingering, here are the tips.

Install the Download Box Button with Counter

Before adding this widget, make sure on your blog you have installed Fontawesome. If not, add this code before </head>or&lt;/head&gt;&lt;!--<head/>--&gt;

<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>
First open Blogger > Click the Themes menu , Edit HTML and add this CSS code before </head>or&lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;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:#e67e22;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>
After that add this code before </body>or can also be added before </head>.

<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'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>
Edit the writing on the code that is marked, edit also the l=10number 10 means that the countdown time needed is 10 seconds. 

Click the Save theme button. 

Next to add the caller Download Box, add the code below in the post on the HTML tab.

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="URL" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i>Blogger Funda</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
File Size 300MB</span>
</div>
</div>
<div class="catatan-downx">
If it's not downloaded automatically, please click Re-download. And if the broken link please report via the Contact Form page of this blog.
</div>
</div>
Re-edit the posts marked with your posts and links. Replace  URL in href="URL" to link your destination. 

 

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close