Blogger Sayaçlı İndirme Kutusu Eklentisi

Film, müzik, tema, kitap vb. indirilebilir ürün hizmeti veriyorsanız indirme linkini güzel bir şekilde sunabileceğiniz bir eklentiyi sizlerle paylaşıyorum.

Gelelim nasıl kuracağımıza ilk olarak Blogger yönetim panelimize giriş yapıyoruz.Tema → HTML'yi Düzenle yolunu izleyerek CTRL+F kombinasyonu ile </head>  veya bu etiket yoksa &lt;/head&gt;&lt;!--<head/>--&gt;  bu etiketi aratarak aşağıdaki kodu bu etiketlerin üstüne ekliyoruz.

JS<script type='text/javascript'>
//<![CDATA[
//Gematriga
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>

Aynı şekilde </head> veya &lt;/head&gt;&lt;!--<head/>--&gt; etiketinden önce aşağıdaki CSS kodunu ekleyin.

CSS<style type='text/css'>
/* Download Counter Box Gematriga */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#0099ff;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#008ae6;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#0099ff;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:#f2f2f2;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:#0099ff;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>

Yine aynı etiketin üzerinde son olarak aşağıdaki JavaScript kodunu ekleyin ve Temayı Kaydet butonuna basarak temanızı kaydedin.

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

Artık tüm kod kurulumlarını tamamlamış bulunuyorsunuz. Eklentiyi kullanabilmek için eklentinin gözükmesini istediğiniz yere ( kenar çubuğu , yayın içerisi , statik sayfa vs. ) aşağıdaki HTML kodunu ekleyip içerisine indirme dosyasının direk linkini veya indirme sayfasının linkini eklemeniz yeterli olacaktır.

HTML<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="fas fa-cloud-download-alt" aria-hidden="true"></i> İndir</button>
<a id="downloadx" href="Dosya Linki Buraya Eklenecek" style="display:none"><i class="fas fa-cloud-download-alt" 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>

Eklentiyi Düzenleme:

HTML kodundaki <button onclick="generate()" id="btnx"><i class="fas fa-cloud-download-alt" aria-hidden="true"></i> İndir</button> kodu içerisindeki İndir yazısı butonun üzerinde gözüken birinci yazıdır. Dilerseniz İndir terimini değiştirebilirsiniz.
HTML kodundaki <a id="downloadx" href="#" style="display:none"><i class="fas fa-cloud-download-alt" aria-hidden="true"></i> Hemen İndir</a> kodu içerisindeki Hemen İndir yazısı butona tıkladıktan sonra süre dolduğunda gözüken yazıdır. İstediğiniz terimle değiştirebilirisniz. HTML kodundaki <span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Yayıncı Adı Buraya Gelecek</span> kodu içerisindeki Yayıncı Adı Buraya Gelecek yazısı yerine kendi adınızı veya blogunuzun adını yazabilirisniz.
HTML kodundaki <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i> Dosya Boyutu Buraya Gelecek</span> kodu içerisindeki Dosya Boyutu Buraya Gelecek Yazısı yerine paylaşacağınız dosyanın boyutunu yazabilirisniz.
Son olarak HTML kodundaki <div class="catatan-downx"> Dosya Açıklaması Buraya Gelecek.</div> kodu içerisindeki Dosya Açıklaması Buraya Gelecek yazısı yerine dosya hakkındaki açıklamanızı yazabilirsiniz.

Önizle Şimdi Tıkla