Beranda › Blogger › Rombak Web

Pasang Back to Top Smooth Mudah di Blogger

Wahyu Achmad Januari 19, 2020 Posting Komentar

Buat dan Pasang Back to Top Smooth Mudah di Blogger. Mungkin sudah banyak tutorial Pasang back to top di pencarian google. Kali ini admin juga akan memberikan tutorial tersebut. walaupun fungsi dari back to top ini sepele, namun ini memagang peranan penting bagi pengunjung blog, untuk kemudahan yang di berikan yaitu jika ingin mengscroll ke atas hanya dengan mengklik satu tombol.

Penasaran bagaimana pemasangan dan penerapan tombol back to top di blogger, simak dan lihat tutorial berikut ini.

Pertama, kalian login ke Blogger, kemudian pilih TEMA, lalu klik EDIT HTML. Selanjutnya masukan kode Fontawesome di bawah ini SETELAH kode <head> atau SEBELUM kode </head>.

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

Jika kalian sudah Terpasang kode Fontawesome seperti diatas, silakan abaikan langkah pertama, dan lanjut ke langkah berikutnya.

Kemudian masukan kode CSS dibawah ini SEBELUM ]]></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;
}

Lalu masukan kode JQuery dan HTML ini, tepat 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>

Jika sudah, Simpan Template dan sekarang lihat hasilnya.

DEMO RESULT ARLINA DESIGN

Jika kalian ingin menambahkan beberapa effect, silakan masukan kode Effect Bounce Berikut ini.


<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

DEMO RESULT ARLINA DESIGN

Untuk setting warna silakan rubah sesuai keinginan kalian. Semoga artikel ini dapat bermanfaat. Sekian dan terima kasih.

Pasang Back to Top Smooth Mudah di Blogger