Merhaba Arkadaşlar ;
Blogger sitenizde indirme linkleri kullanan bir Blog'a sahipseniz eğer burada anlatacağım " Sayaçlı İndirme Düğme Eklentisi " tam olarak size göre olduğunu düşünüyorum.
Şimdi gelelim Sayaç İndirme Düğmesini Eklemeye ;
Öncelikle Blogger yönetim paneline giriş yapın. Tema - HTML'yi düzenleyi takip ederek sitenize ait HTML kodlarına ulaşın.
Daha sonra tema kodlarınızın içerisinde herhangi bir boş yere tıklayarak Ctrl + F yardımı ile </head> kodunu aratın.
Daha sonra bulduğunuz bu kodun üzerine aşağıda ki 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> Daha sonra yine aynı şekilde </head> kodunun üzerine aşağıda verilen 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> Son olarak yine aşağıda vermiş olduğumuz HTML kodlarını </body> kodundan önce 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'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>Şimdi artık Tüm kodları eksiksiz olarak Temamıza ekledikten sonra eklentiyi kullanabilmek için eklentinin görünmesini istediğiniz yere aşağıda HTML kodunu ekleyip içerisine indirilecek dosyanızın direkt linkini veya indirme sayfanın linkini eklemeniz yeterlidir.
<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> 
Bu yazı Serkan Gündoğdu tarafından yazılmıştır. ✔ Bu içeriği Beğendiyseniz Lütfen Paylaşın ⤵
