Cara Membuat Tombol Back To Top Di Blogspot

---

Cara Membuat Tombol Back to Top di BlogspotOke, langsung saja ikuti langkah-langkah berikut ini. Script ini cukup sederhana, menggunakan CSS dan JQuery. Oleh karena itu kamu harus memasang kode JQuery di template blog.

1. Pastikan di template kamu sudah terdapat kode JQuery seperti ini :
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Kamu bisa cek terlebih dahulu, caranya :
Tekan CTRL + F untuk melakukan pencarianCari kode tersebut diatas </head>Catatan : Ada banyak versi kode JQuery, saya menggunakan versi 2.x, jika sudah terpasang versi lain abaikan langkah ini. Tapi saya sarankan menggunakan versi 2.x .

Jika belum ada kode JQuery, lakukan langkah berikut :
Masuk ke blogger, Tema > Edit HTMLSalin kode JQuery diatas</head>Simpan 2. Klik "Tata Letak" (Layout)
3. Klik "Tambahkan Gadget" di Sidebar
4. Pilih HTML/Javascript
5. Copy dan paste kode berikut :
<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 8px;
    right: 10px;
    text-decoration: none;
    display: none;
    cursor:pointer;
    width: 40px;
}
</style>
<img class="mbw-back-to-top" src="http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });
 
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Catatan : Kode yang berwarna merah adalah gambar tombol navigasi back to top. Kamu bisa menggantinya dengan gambar yang lain.

6. Klik Simpan.

Kumpulan gambar-gambar tombol navigasi Back to TopKamu bisa coba menggunakan gambar-gambar tombol navigasi keren lainnya seperti berikut ini. Cara menggantinya cukup copy URL gambar berikut dan paste di bagian kode yang berwarna merah tadi.

http://4.bp.blogspot.com/-nhvmIT-UOiY/USDh-EyeKDI/AAAAAAAAAjE/hjEdj5OMvO0/s1600/back+to+top.png
http://3.bp.blogspot.com/-ggvoO88bhfM/USDi6IWVtFI/AAAAAAAAAjc/n4vpSkZgR00/s1600/back+to+top.png 


http://2.bp.blogspot.com/-BkNGUImcIV4/USDcBMHYjqI/AAAAAAAAAig/qEtwRO4pH6Q/s1600/back+to+top.png

http://3.bp.blogspot.com/-Urx3H8aFQmY/USDkbnvSsLI/AAAAAAAAAkA/Wm4OkKT9yRI/s1600/back+to+top.png
http://3.bp.blogspot.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gif 

http://3.bp.blogspot.com/-X5sq11nsiNY/USDiu1zNWSI/AAAAAAAAAjM/8Y6vn3Vx6kQ/s1600/back+to+top+button.png
http://2.bp.blogspot.com/-PEmadyDjsUw/USDjUyqlWsI/AAAAAAAAAjs/oVRttmskRfc/s1600/back+to+top+button.gif 

http://2.bp.blogspot.com/-3sXsLU1aW3s/USDkamRLRZI/AAAAAAAAAj4/UOoh-GJWUdI/s1600/back+to+top+button.png
http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png 

http://3.bp.blogspot.com/-yhJXvPXAuNw/UQLk-mySRjI/AAAAAAAAAXg/pIAnUf9q1c8/s1600/Back-To-Top.png
 http://4.bp.blogspot.com/-BWmnRp-sR9o/USDmkStjAcI/AAAAAAAAAko/q6nJN8bXMZ8/s1600/back-to-top-button.png
http://2.bp.blogspot.com/-C3ZJY99YKfo/USDmD4KR-zI/AAAAAAAAAkY/3fO83hpF2Zk/s1600/back-to-top-button.png
http://1.bp.blogspot.com/-b3YWne8aCdw/USDmXTnyUiI/AAAAAAAAAkg/SieNqYTVQKQ/s1600/back-to-top-button.png
http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png
http://2.bp.blogspot.com/-36z7H3mWlZ0/USDizr47anI/AAAAAAAAAjU/8SoPm-odD7I/s1600/back_to_top_button.png
Sumber gambar : http://www.forumblogindo.com/2015/05/koleksi-gambar-tombol-back-to-top-button-blog-keren-user-friendly.html

Sekian tutorial tentang Cara Membuat Back to Top (Tombol Navigasi Kembali ke Atas) Melayang di Blog semoga bermanfaat.

---