Blogger Kaydırma Çubuğu Yüzdesi Ekleme

Görüntüleme

( Kelime)

Değerli Blog Geliştiricim takipçileri. Bu yazımda sizlere Blog sayfanıza Kaydırma Çubuğu (Scroll Bar) Yüzdesi nasıl eklenir bundan bahsedeceğim. Blog sayfaları için çok önemli bir eklenti olmasada görsel olarak web sitenize veya blog sayfanıza renk katacağını düşündüğüm için bu makaleyi sizlerle paylaşmak istedim.

Kaydırma Çubuğu Yüzdesi Nasıl Eklenir?

Öncelikle Blogger kotrol paneline giriş yapın. Daha sonra Tema > HTML'yi Düzenle yolunu izleyerek Kod Editörünü açın. CTRL + F tuş kombinasyonu ile </head> tagını aratın ve </head> tagının bir satır altına aşağıdaki HTML Kodunu yapıştırın.

HTML Kodu

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

Daha sonra yine CTRL + F tuş kombinasyonu ile </b:skin> ya da </style> taglarını aratın ve bir satır üzerine aşağıdaki CSS Kodunu yapıştırın.

CSS Kodu

CSS#scroll {
    display: none;
    position: fixed;
    top: 0;
    right: 15px;
    z-index: 500;
    background-color: #369fcf;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

#scroll:after {
    content: " ";
    position: absolute;
    top: 50%;
    right: -10px;
    height: 0;
    width: 0;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: #369fcf;
}

Bu adımda ise eklemeniz gerek bir JavaScript Kodu var. Bu kodu eklemek için yine Tema > HTML'yi Düzenle ye gelerek açılan Kod Editöründe </body> tagını CTRL + F tuş kombinasyonu ile aratın. Bulduğunuz </body> tagının bir satır üzerine aşağıdaki JavaScript Kodunu ekleyin.

JavaScript Kodu

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

Son olarak Temayı Kaydet dedikten sonra Blog Sayfanızı kontol edin.

Blogger Kaydırma Çubuğu Yüzdesi Ekleme ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.