Memasang Back To Top Smooth di Blog

Memasang Back To Top Smooth di Blog - Jika Sobat mencari di search engine, pastilah sudah banyak sekali tutorial cara pemasangan back to top di blog. Nah kali ini Saya akan membahas tutorial bagaimana cara memasang back to top yang smooth pada blog Sobat.

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 sebelumnya, maka silahkan sobat hapus terlebih dahulu.

Memasang Back To Top Smooth di Blog :

---

1. Buka Blogger

• Masuk Dashboard.
• Klik Template.
• Pilih Edit HTML.

2. Salin/Copy code 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 code 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 smooth di blog? Oke sekian tutorial yang bisa saya berikan, kurang lebihnya mohon maaf. Salam Blogger Indonesia.

http://bloggerisn.blogspot.com/2015/05/memasang-back-to-top-smooth-di-blog.html

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya