Membuat Tombol "Back To Top" di Blog

Tips & Trik : Cara Mudah Membuat Tombol "Back To Top" di Blog

Hallo sobat blog my-seven7ash. Kali ini saya ingin share tutorial Cara Mudah Membuat, Menampilkan dan Memasang Tombol "Back To Top" di blog sobat. Fungsi dari Tombol "Back To Top" adalah membuat sebuah blog agar memudahkan pembaca blog tersebut.

Salah satu kemudahan pembaca dalam menelusuri blog kita dalam hal desain adalah adanya tombol back to top. Tombol ini akan berfungsi sebagai scroll yang akan membantu memindahakan scroll dari bawah ke atas halaman awal blog. 

Beberapa Tips dan Trik tutorial dari rekan-rekan blog lain mungkin sudah banyak yang memberikan cara mudah guna memasang tombol back to top ini. So, mari kita simak lebih lanjut tips kali ini.

Cara Memasang Tombol "Back to Top"

1. Tempate > Edit HTML
2. Copy Paste 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>



5. Save Template

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

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

Terima Kasih Telah Membaca Artikel : Membuat Tombol "Back To Top" di Blog