Membuat Back To Top Keren Di Blogger

Sebenarnya di template yang saya pakai sekarang telah ada fitur Back To Top ini sobat, namun karena saya putuskan untuk mengganti tampilan footernya, jadinya saya korbankan saja back to top dari template yang saya gunakan.

Nah, sebagai penggantinya, saya menggunakan back to top ala mbak Arlina Design. Widget ini dilengkapi dengan fitur Auto Hide, jadi hanya akan muncul ketika user scroll kebawah. Terima kasih untuk mbak arlina yang telah membagikannya.

Untuk sobat yang ingin menggunakan back to top ini yang telah saya modifikasi sedikit, sobat bisa menguikuti tutorial singkat berikut ini.

Pertama pasang Font awesome terlebih dahulu pada template sobat, jika sudah ada di dalam template, Lewati langkah ini atau ganti dengan kode yang saya berikan berikut.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Script Font Awesome itu telah saya lengkapi dengan script yang akan meload data font awesome secara async. Jadi tidak akan membebani loading blog sobat. O ya, letakkan kode tersebut diatas kode </head>.

Selanjutnya tambahkan CSS berikut ini diatas ]]></b:skin> atau </style>.

.smoothscroll-top {position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#09c;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:2px;border-radius:none;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;}

Pengaturan pada warnanya hanya perlu anda perhatikan pada #09c dan ganti sesuai warna yang sobat inginkan. Setelah itu untuk mengganti warna hovernya sobat ganti pada #3eb2ea, ganti sesuai wana yang sobat inginkan, atau selaraskan dengan warna blog sobat.

Setelah itu kita masuk ke langkah terakhir sobat, tambahkan kode dibawah ini tepat diatas kode </body>.

<div class='smoothscroll-top'>
    <span class='scroll-top-inner'>
        <i class='fa fa-2x fa-chevron-up'/>
    </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>

Selanjutnya jangan lupa untuk Simpan Template, dan coba lihat di blog sobat. Seharusnya sudah bersemayam back to top dibagian bawah kanan blog sobat. Semoga bermanfaat :)

Source : http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html