Blogger Back To Top Başa Dön Butonu

Blogger sitelerinin okuyucularının artması ve buna bağlı olarak blog yazarlarının paylaşmış olduğu içeriklerin uzun olması ve blogger sitelerinin daha kullanışlı hale gelmesi için, blogger eklentilerine ihtiyaç gün geçtikçe artmaktadır.

Smooth Back To Top olarak da bilinen başa dön butonu özellikle mobil ve tablet gibi cihazlarda blog ziyaretçileri için blog dolaşımını kolaylaştırıcı bir kaç blogger yukarı çık eklentisi daha da önem kazanıyor. Başa dön butonu rolü ve fonksiyonu tek bir tıklama ile ziyaretçilerin sayfa başına dönmek istedikleri işlemi yapmaktadır.

Smooth Back To Top - Başa dön butonu nasıl eklenir?

NOT: Öncelikle blogunuzda daha önceden eklenmiş başa dön yada yukarı çık butonu varsa onu kaldırın.

1. Blogger hesabınıza giriş yapın eklemek istediğiniz blogu seçin, kumanda panelinden Şablon > HTML'i Düzenle CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki Smooth Back To Top HTML kodunu </head> kodunun bir satır üzerine ekleyin. Eğer blogunuzda aşağıdaki HTML kod daha önceden eklenmiş ise tekrar eklemenize gerek yok.

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

2. Aşağıdaki Smooth Back To Top CSS kodunu ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

.bescroll-top{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background:#f58220;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:3px;border-radius:4px;transition:all 0.5s ease-in-out;transition-delay:0.2s}.bescroll-top:hover{background:#e76120;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s}.bescroll-top.show{visibility:visible;cursor:pointer;opacity:1;bottom:25px}.bescroll-top i.fa{line-height:inherit}

3. Aşağıdaki Smooth Back To Top JavaScript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

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

extension Blogger Eklentileri
Blogger Back To Top Başa Dön Butonu hakkında daha fazla bilgi için iletişim sayfasından yada yorum bölümünden bize ulaşabilirsiniz.

Blogger AdBlock Pasifleştirme Eklentisi