Cara Memasang Buttang Download Box dengan Counter Di Blogger

Assalamualaikum & salam sejatera..
Pada hari ini O4U akan berkongsi sedikit ilmu tentang download button di blogger..
Banyak yang bertanya cara membuatnya so hari ini O4U akan kongsikan..


OK terus saja ke topiknya..
Login ke blogger anda Dan tap pada menu Theme > Edit html

Tambahkan kod berikut selepas kod</head>

<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>

Dan tambahkan juga kod cssnya

 /* 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}}

Seterusnya Tambahkan kod berikut sebelum kod </body>

<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 Redy In "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>

Berikutnya kod untuk menampilkan adownload button :

Berikut

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
File Name
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
<a id="downloadx" href="linkdownloadx" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Againt</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> ONET4U.COM SCRIPT</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 30MB</span>
</div>
</div>
<div class="catatan-downx">
Terimakasih Kerana sentiasa menyokong ONET4U .
</div>
</div>

Gantikan text berwarna dengan link file anda, naa save..



senang bukan hihi..