Catatan Sang Pemula: Cara Memasang Tombol Back to Top

Cara Memasang Tombol Back to Top

Tombol Back to Top Simple

Tombol Back to Top (Kembali ke Atas) bisa kita tempatkan di blog untuk memudahkan visitor agar bisa lebih mudah untuk kembali ke halaman teratas.

Jadi, kalau kita pasang tombol back to top ini visitor bisa langsung memilih tombol tersebut untuk pindah ke halaman paling atas sendiri.

Untuk script kali ini, saya mengikuti dari contohblognih.blogspot.com salah satu master blogger Indonesia yang menjadi langganan saya untuk belajar blogger.

Untuk model tombol back to top ini akan muncul saat visitor berada pada halaman website/ blogger kita. Berikut tutorialnya silakan ikuti dengan seksama.

Tutorial

Pertama, Buka blogger pilih Template lalu pilih Edit HTML.

Kedua, Pasang kode CSS berikut diatas </b:skin>

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

Ketiga, Pasang kode Javascript berikut diatas </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>

Keempat, Pasang kode HTML berikut diatas </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>

Kelima, Save Template. Ini hasil jika anda berhasil.

Sekarang tombol back to top sudah terpasang di blog anda, jika belum muncul silakan baca lagi tutorialnya secara seksama.

Jangan lupa juga baca trik-trik simple blogger lainnya DISINI