Blogger Sayaçlı İndirme Kutusu Eklentisi

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

İndirme Kutusu

Nasıl Eklenir ?

• Blogger yönetim paneline giriş yapın . Tema → HTML'yi Düzenle yolunu izleyerek sitenizin kaynak kodlarına ulaşın.
• Ardından tema kodları içerisine her hangi bir yere bir kere tıklayıp Ctrl + F yardımı ile </head> etiketini aratın.Eğer kodlar içerisinde bu etiket yoksa &lt;/head&gt;&lt;!--<head/>--&gt; şeklinde aratın ve etiketin üzerine eğer eklenmemişse aşağıdaki JavaScript kodunu ekleyin.

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

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

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

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

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

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

Eklentiyi Düzenleme:

1. HTML kodundaki<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" 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.
2. HTML kodundaki<a id="downloadx" href="#" style="display:none"><i class="fa fa-cloud-download" 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.
3. 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ınıncı Adı Buraya Gelecek yazısı yerine kendi adınızı veya blogunuzun adını yazabilirisniz.
4. 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şıcağınız dosyanın boyutunu yazabilirisniz.
5. Son olarak HTML kodundaki<div class="catatan-downx"> Dosya Açıklaması Buraya Gelecek.</div> kodu içerisindeki Dosya Açılaması Buraya Gelecek yazısı yerine dosya hakkındaki açıklamanızı yazabilirsiniz.

• DEMO