Öncelikle HTML editör sayfamıza birtakım eklentiler yapalım.
Html editör sayfamızda Ctrl+F yardımıyla </head> kodunu aratıyoruz. Bulduğumuz kodun üzerine gelecek şekilde aşağıda ki JavaScript kodunu ekliyoruz.
<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>Daha sonra yine aynı kodun </head> üzerine gelecek şekilde aşağıda ki CSS kodlarını ekliyoruz.
<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>Ve son olarak yine aynı kodun </head> üzerine gelecek şekilde aşağıda ki JavaScript kodlarını ekleyip tema kaydet diyoruz.
<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'/> Dosyanın İndirilmesine "+l.toString()+" Sn Kaldı....",t.style.display="none")},1e3)}
//]]>
</script>Şimdi makalemizi yazdıktan sonra indirmek istediğimiz dosyayı sayfamızın HTML editör bölümüne geçiyoruz ve eklentiyi kullanabilmek için aşağıda ki HTML kodlarını ekliyoruz. Kod içerisinde ki bölümleri siz indireceğiniz dosyanın çeşidine göre değişiklikler gösterebilirsiniz.
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Yayıncı Adı Buraya Gelecek
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> İndir</button>
<a id="downloadx" href="Dosya Linki Buraya Eklenecek" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Hemen İndir</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Dosya Adı Buraya Gelecek</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
Dosya Boyutu Buraya Gelecek</span>
</div>
</div>
<div class="catatan-downx">
Dosya Açıklaması Buraya Gelecek.
</div>
</div>Bütün işlemler bu kadar umarım herkes için faydalı bir makale yazısı olmuştur.