Memasang Smooth Back To Top di Blog

Halo Bro...Kali ini saya akan memberikan tutorial Blogger tentang Memasang Smooth Back To Top di Blog, sebenarnya tutorial ini sudah sangat banyak di Internet.

Fungsi dari Widget ini adalah untuk memudahkan pembaca menscroll ke atas dengan sekali klik. Jadi cocok untuk blog yang punya banyak artikel panjang-panjang.

Cara Memasang Smooth Back To Top di Blog

1. Masuk ke Blogger > Template > Edit HTML

Tambahkan Script font awesome, tapi jika sudah ada lewatkan saja. Letakan di atas kode </head>

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

2. Tambahkan Script css dibawah ini sebelum ]]></b:skin>

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

3. Tambahkan Script JQuery dan HTML di bawah ini sebelum </body>

 <div class="smoothscroll-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) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-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> 

4. Simpan dan lihat hasilnya...

Semoga bisa bermanfaat dan terimakasih telah membaca artikel Memasang Smooth Back To Top di Blog