Blogger'da Yüzdelik İlerleme Durumu Eklentisi (ScrollBar)

Merhaba arkadaşlar bugün de sizlere blogunuza tasarım dokunuşları yapabileceğiniz güzel bir eklenti ile karşınızdayım.Bu eklenti başlıktan da anladığınız üzere sayfanın yüzde dilimlik olarak kaçında olduğunuzu gösterir.

Blogger yönetim panelimize giriş yapıyoruz.Tema > Html'yi Düzenle kısmını takip ederek sitemizin ana koduna erişim sağlıyoruz.CTRL+F kombinasyonu ile ]]></b:skin>  etiketini aratıyoruz aşağıdaki kodu ise bu etiketin hemen üstüne ekliyoruz.

CSS#scroll {
/* Gematriga */
  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;
}

İkinci adım olarak ise </head> etiketini aratıp aşağıdaki kodu direkt altına ekliyoruz.

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

Unutmadan  </body> etiketini de aratıp aşağıdaki kodu üstüne ekleyip kaydediyoruz.

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

Sitenizde eklentiyi test edebilirsiniz.