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

Görüntüleme

( Kelime)

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: İşlemlere başlamadan önce 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. Adım : 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

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

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

CSS Kodu

CSS.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. Adım : Aşağıdaki Başa Dön (Back to Top) JavaScript kodunu Web Sitenizin veya Blog Sayfanızın </body> tagının bir satır üzerine ekleyin.

JavaScript Kodu

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