Memasang Back To Top Smooth Keren di Blog

Memasang Back To Top Smooth Keren di Blog - Hai sobat, ketemu lagi dengan Saya dipostingan terbaru ini, oke sebelumnya Saya ingin mengucapkan selamat menunaikan ibadah puasa bagi kalian yang menjalankan. Oke kali ini saya akan memberikan tips bagaimana cara memasang back to top smooth keren di blog.

Fungsi back to top sendiri, yaitu memudahkan pengunjung blog sobat saat mengscroll ke atas pada blog sobat, jika dengan menggunakan back to top, hanya dengan 1x klik, halaman langsung kembali keatas.

CATATAN!:
Template Sobat harus telah terpasang Font Awesome, jika belum silahkan baca Cara Memasang dan Menggunakan Font Awesome di Blog. Jika template sobat telah terpasang back to top sebelum silahkan sobat hapus terlebih dahulu.

Memasang Back To Top Smooth di Blog :

1. Buka Blogger > Fashboard > Pilih Template > Klik Edit HTML.
2. Salin/Copy kode CSS dibawah ini tepat diatas ]]></b:skin> atau </style>.

/* Smooth Back To Top Bloggerisn */
.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. Lalu salin/copy kode jQuery dan HTML dibawah ini tepat sebelum 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>

4. Setelah itu Simpan/Save Template dan lihat hasilnya.

Live Demo

Bagaimana, cukup mudah bukan dalam memasang back to top smoot keren di blog? Oke sekian tutorial yang bisa Saya berikan, kurang lebihnya mohon maaf. Semoga bermanfaat .

http://www.irhamantap.my.id/2015/07/memasang-back-to-top-smooth-keren-di-blog.html

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Irham Satriawan

Mencoba untuk berkarya dan berbagi pengalaman seputar tips dan trik blogger 

Artikel Menarik Lainnya