Blogger Scrollbar'a Değer Verme

Sayfalarımızdaki kaydırma çubuğu (scrollbar) özelleştirmeleri oldukça yaygın bir şekilde bulunmakta. Bu özelleştirmelerden bir tanesi ise scrollbara değer vermek. Okuyucularımız bir makaleyi okurken sayfada aşağıya doru inerler. Bu eklenti sayesinde makalelerimizi okurken sayfanın ne kadar daha aşağıya ineceğini kaydırma çubuğunda bir yüzde ile görebilirler. Bu eklenti sayesinde sayfa uzunluğumuzun yüzde olarak neresinde olduklarını anlamaları için oldukça yararlı bir eklenti olmuş.

Eklentiyi önizlemek için buraya tıklayın.

Sayfamızı aşağıya doğru kaydırdığımızda scrollbarda bir yüzde değerinin çıkacağını fark edeceksiniz.

Eklentimizi blogumuza nasıl ekleyeceğimize gelirsek;

İlk olarak Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyerek açılan kod sayfamızın içerisinde CTRL+F tuşlarına basıyoruz. ]]></b:skin> kodunu aratıp bulduktan sonra aşağıda kodları bulduğumuz ]]></b:skin>  kodunun hemen üzerine ekliyoruz.

#scroll {display: none;position: fixed;top: 0;right: 20px;z-index: 500;padding: 3px 8px;background-color: #2187e7;color: #fff;border-radius: 3px;}#scroll:after {content: ” ”;position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: #2187e7;}

Daha sonra yine CTRL+F tuşları ile </head> kodunu aratıp bulduktan sonra </head> kodunun hemen altına aşağıdaki kodu yerleştiriyoruz.

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

Son olarak ise kodlarımız arasından yine CTRL+F yardımıyla </body> kodunu bulduktan sonra bulduğumuz </body> kodunun hemen üzerine aşağıdaki kodları yerleştiriyoruz.

<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(100);if (scrollTimer !== null) {clearTimeout(scrollTimer);}scrollTimer = setTimeout(function() {$('#scroll').fadeOut();}, 1500);});/*]]>*/</script>

Bu işlemleri tamamladıktan sonra Şablonu kaydet diyoruz. Sonrasında kaydırma çubuğumuz da bir yüzde ile sayfanın ne kadar aşağısına gidildiği görülmeye başlayacaktır.