Blogger Okunma Yüzdesi Eklentisi Kurulumu (Yüzdelik ilerleme)

Blogger Okunma Yüzdesi Eklentisi Kurulumu (Yüzdelik ilerleme)

Sitenizi ziyaret eden kişilerin içeriğin sonuna ne kadar kaldığını, içeriğin ne kadarlık kısmını okuduklarını görmelerini sağlayacak ve bloğunuza ayrı bir hava katacak eklentinin kurulumunu yapacağız.

Eklenti Kurulumu

Aşağıdaki işlemleri uygulamadan önce temanızın bir yedeğini almanızı tavsiye ederiz.

Blogger.com adresine gidip bu özelliği kazandırmak istediğiniz bloğunuzun yönetim paneline giriş yapın.

Tema > HTML’yi düzenle yolunu izleyerek temanızın kaynak kodlarına erişin.

Kodların içerisinde her hangi bir yere tıklayarak CTRL+F kombinasyonu ile ]]></b:skin> kodunu aratın ve bir satır üzerine aşağıdaki kodu ekleyin.

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

CSS

Yukarıdaki kodu ekledikten sonra </head> kodunu aratın ve bir satır altına aşağıdaki kodu ekleyin.

<div id='scroll'>
</div>

HTML

Son olarak </body> kodunu aratın ve bir satır üzerine aşağıdaki kodu ekleyip Kaydet seçeneğine basın.

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

JavaScript

Önizleme

Yukarıdaki tüm adımları izledikten sonra bloğunuzuda aşağıdaki gibi bir yüzdelik belirecektir.

Demo

Değerli Bloguzmani.com okurları bu yazımızda Blogger için yüzdelik ilerleme eklentisinin nasıl kurulacağından bahsettik bir sonraki içerikte görüşmek üzere, iyi bloglamalar..