Cara Pasang Tombol "Back to Top" di Blog

Cara Memasang Tombol "Back to Top" di Blog Blogspot. Hanya Muncul Saat Halaman Blog Discroll ke Bawah.

TOMBOL "Back to Top" (Kembali ke Atas) adalah elemen ekstra dalam sebuah blog atau situs web untuk memudahkan pengunjung kembali ke bagian atas blog tanpa scroll mouse.

Dengan adanya tombol back to top, pengunjung tinggal klik tombol itu dan tampilan bagian atas blog akan muncul secara otomatis.

Tombol "kembali ke atas" menggunakan Javascript.  CSS/HTML saja, tanpa JS, sehingga Fast Loading.

Cara Memasang Tombol "Back to Top"

1. Tempate > Edit HTML

2. Copas kode CSS berikut ini di atas kode  ]]</b:skin>

#MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}

3. Pasang kode Javascript berikut ini di atas kode </head>

<script type='text/javascript'>

$(function() {

    $.fn.scrollToTop = function() {

    $(this).hide().removeAttr(&quot;href&quot;);

    if ($(window).scrollTop() != &quot;0&quot;) {

        $(this).fadeIn(&quot;slow&quot;)

    }

    var scrollDiv = $(this);

    $(window).scroll(function() {

        if ($(window).scrollTop() == &quot;0&quot;) {

        $(scrollDiv).fadeOut(&quot;slow&quot;)

        } else {

        $(scrollDiv).fadeIn(&quot;slow&quot;)

        }

    });

    $(this).click(function() {

        $(&quot;html, body&quot;).animate({

        scrollTop: 0

        }, &quot;slow&quot;)

    })

    }

});

$(function() {

    $(&quot;#MD-StoTop&quot;).scrollToTop();

});

</script>

4. Pasang kode HTML berikut ini di atas kode </body>

<a href='#' id='MD-StoTop'><img alt='back to top' src='http://2.bp.blogspot.com/-USm_7qiKVXc/UxUYG09tz_I/AAAAAAAACTA/6BRDkVAwLek/s1600/backtotop.PNG'/></a>

Catatan:

1. Kita bisa mengganti gambar panah (Tombol "Back to Top" ) dengan gambar pilihan sendiri dengan cara mengganti URL Gambar yang berwarna merah. 

2. Lihat: Koleksi Gambar Tombol Back to Top untuk Blog

5. Save Template!

Kini Tombol "Back to Top" sudah terpasang di Blog Blogspot Anda! Good Luck!