Cara Memasang Tombol Back To Top di Blogger - Smooth Effect

Bagi anda pengguna template bawaan blogger atau pembuat template mungkin anda memerlukan tutorial ini untuk menambahkan fitur back to top di blog anda. Template bawaan blogger mungkin belum ada tombol back to top sehingga anda perlu memasang sendiri. Atau jika anda tidak cocok dengan back to top button bawaan template maka anda bisa menggantinya dengan tombol back to top yang akan kita pasang nantinya.

Back to top button ini memiliki smooth effect,smooth effect ini berfungsi ketika tombol back to top diklik maka secara smooth dan lembut maka laman akan scroll up. Dengan lembut dn perlahan. Tidak langsung menuju ke atas dengan cepat.

Back to top button sendiri memiliki peran penting yaitu membantu pengunjung menuju bagian paling atas di blog anda tanpa harus repot scroll up secara manual cukup klik tombol back to top maka mereka akan langsung menuju ke atas. Bagaimana tertarik untuk memasang tombol back to top? Ikuti langkah dibawah 👇

Cara Membuat Back To Top Button

Langkah 1

Silakan masuk ke blogger, pilih Template ➝ Edit HTML. Cari kode </head>

Langkah 2

Salin kode dibawah dan letakkan diatas kode </head>

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

Langkah 3
Salin kode dibawah dan pastekan/letakkan diatas kode ]]></b:skin> atau </style>

.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;
}

Langkah 4
Salin lagi kode dibawah ini dan letakkan diatas kode </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>

Langkah 5
Simpan template dan lihat blog anda.

Gimana hasilnya? Tombo; back to topnya sudah muncul di blog anda atau belum. Jika tidak ada masalah maka cukup sekian artikel cara memasang tombol back to top yang bisa saya bagikan semoga bermanfaat.