Blogger Başa Dön (Back to Top) Butonu

Günümüzde Web Site kullanıcılarının artması ve ayrıca blog yazarlarının paylaşmış olduğu içeriklerin uzun olmasından dolayı blog sayfalarının daha da kullanışlı olması gerekmektedir. Bu nedenle blog sayfaları için bazı eklentilere ihtiyaç duymamız kaçınılmaz oluyor.

Başa Dön Butonu Masaüstü PC dışında Mobil ve Tabletlerde de blog ziyaretleri için içerik dolaşımını kolaylaştırıcı ufak ama etkili bir eklentidir. Bu buton sayfa ziyaretçilerinin en başa dönmesinde oldukça kolaylık sağlamaktadır.

Peki Başa Dön (Back to Top) Butonu nasıl eklenir?

NOT: Blog sayfanızda veya Web Sitenizde daha önceden eklemiş olduğunuz Başa Dön Butonu (Back to Top) varsa kaldırmanızı öneririz.

1. Blog hesabınıza giriş yapın ve butonu eklemek istediğiniz blog sayfanızı seçin, kontrol panelinden Tema > HTML'i Düzenle'ye tıklayın CTRL + F tuş kombinasyonu ile </head> tagını bulun ve aşağıdaki Başa Dön (Back to Top) kodunu </head> tagının bir satır üzerine ekleyin. Eğer bloğunuza aşağıdaki HTML kodu daha önceden eklenmiş ise tekrardan eklemenize gerek yok.

HTML Kodu

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Aşağıdaki Başa Dön (Back to Top) CSS kodunu ]]></b:skin> tagının ya da </style> tagının bir satır üzerine ekleyin.

CSS Kodu

.bescroll-top {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99;
    background: #f8695f;
    color: #fff;
    width: 33px;
    height: 50px;
    line-height: 46px;
    right: 25px;
    bottom: -25px;
    padding-top: 3px;
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
}
.bescroll-top:hover {
    background:#444;
    color:#fff;
}
.bescroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;bottom:25px
}
.bescroll-top i.fa {
    line-height:inherit;
    font-size:1.6em;
}

3. Aşağıdaki Başa Dön (Back to Top) Java Script kodunu </body> tagının bir satır üzerine ekleyin.

Java Script Kodu

<div class="bescroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){ 
    $(document).on( 'scroll', function(){ 
        if ($(window).scrollTop() > 100) {
            $('.bescroll-top').addClass('show');
        } else {
            $('.bescroll-top').removeClass('show');
        }
    }); 
    $('.bescroll-top').on('click', scrollToTop);
}); 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

Son olarak Temayı Kaydet diyoruz.

Blogger Başa Dön (Back to Top) Butonu eklentisi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.