Tutorial: Cara Membuat Tombol Back to Top di Blogspot

Cara Membuat Tombol Back to Top di Blogspot

Oke, 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 pencarian
• Cari 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 HTML
• Salin 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3sA7LBQe3IEFM4f0ntFK6FyR0tMQuMrJz8j0dexfbAjMw-kLnJxuV75xWP-ZUo-SeEOmtHAj1xVeS-FwAl_3D76wcMXJWvQNCwaFPbYMPRnanCw1u0kgqMBuzsfrxKDeqLuLtqIa0q8/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 Top

Kamu 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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8msoQ484oy5gChboZUeoVCmBCVOTmNEKhOTM2IOFIvOlnIDpHwJ-FD3mqvO-kHPbKYxwXKhu1MAZi7043KwZA6599FsALAPo4uKssm1dErzo0ntUgH2w9hp8RLNG2s6czJUWRuS-s_w/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0S7lwZxuwB00GZLUfvIbSawsx8YoU41nRfTHV511jiCV0b_ncxmyhqS6AOLO0sxYSBAaFQEIOOHyWl4cg4RCwu3h9XzDHJha3d8FDzApP6tftHDPzc2LIwD4_TlW3eieKN1uPzb7ong/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlGPFefOmxqGt68m4DmSKjwemOB04RbY_ikslxPlgl7ZQJ8qGRL3nTcp0bxR9SCVHvV69kEjEx3pix0JRI85QsRBlA4Wcy8mHLMfY4xDQQzmkcht-Qye1tfhmqf9pP6lonJep-_LGeEvg/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGwb5e2TMlWRe17MtwBkIYP04gcMHFcZ1q_t61rKG5gzWbLwQTkYCkpYROjBP4JIyc6a66F4EJUjPtS-EpnyszJUlUHqFBsrnfkzJltSrQUCtLU2I-FrITxb3uQE4ZgpqhFSoL1subTI/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN0TeCRDZZovoMN11vG3Hom79eRCwq4BP7sDeTRfQtEBIfDs9NvWGbfKy0c-OosYQvuCjmmj01zvj5F4f2BQnVVrZ0XADcNNFKST_h6_URGUf067qINb7uQoux8dvvJ2wRqykBQcYlgwM/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbx9zIIYnc05ZVIc4Ho_ED7qBsEJ8ZURqD5uFM18GtzGVPIV4as9V2MrLyqMC39pIX2QsG4aaKvw6LvtALd8kGq6V1Ea8F31gN_s38saB-LioQkwaeKuWie_rj3J0TCdkRdqNcyHkjhJQ/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijhOSV4Khomh2mq7Dym2WEF7_vMkoRUsH5RHfNgW1-i8wPIpSGfyIWc4DYPtc_U4kktV8sHyB5YBVQBA6yR8uFh81-xEPNsMtq1HshnF5lxhKMquRW3NYbDnZEBIj9NhjvS93UUAzJBu0/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9Db8ycnNGdNFMBGkF-OQh968hR1NNX59Mts476xm-fDEwNQVkqMiF6EJQ9iUbDlzokyiL2JTQK6nVtVofWt7H5wSLDnvZgMn3QkjabeR1ToBrAzTlNks0Qvsel5FoV3PawDMyAGovno/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvyvq0JsyuBkLv23eA-Ff801eWlRvsNKbbJ4LM9Y_XLym7yGuFwXSZV22lo7EV0Y_0XVUfCPQiMfvzZp_SMD6wy2Twtt0G8G8nsfItmyLiFKBdkGwyWzwbfJ3PNVMfHdf4NfALj1t7og/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTyB-NLPQrBfaxXv9weu9mCkyzWkN16eBSz86HgmnlvOZDV4OQluUMMqkVB-eD0jJjJiDZr8US-22PqhrnbEs5oHHgyqoVIZ0YGYu8OCAqE05Fbb3HPEa-kE59TNrYsHbGG-M_Ovym5I/s1600/Back-To-Top.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8NZuf2VtOoZV5C8ZUrlm2qWIOa2sboEYuTM4POSTPXMh2eIdkqJk3mehl5b6hOAhWapzYZfT5RdMf9botn2cjuUe-oMQf8_eM3nI9MVnzcMMBcc0lDv52wA5W6E11HZTVZkBI5PRS2Q/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlJ1qlSC8iL0jc0nKHYb_lwzBNJWnLRLPGbBpU59cWLKL3e3hirb2GhJRXhJJz3riKuWjZIugLqXdBX6JCNMV9QJlvfXYyMorEPDw-5IP1H4c7q0pRKumQJgb_62xBjQCNWNtNFblSDg/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcuagWmcvryVEReB0dnynsvS-M8RSAewCOTMWAEXS96HvcRg7FVSTPWJpdvdtJFdo-AqygqqbY_fuF0-8435K75KzSd_yIb2RTosq1-OiRcxbIjoK70id7MTmK5VxaD2LE0ih5sUELIcY/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3sA7LBQe3IEFM4f0ntFK6FyR0tMQuMrJz8j0dexfbAjMw-kLnJxuV75xWP-ZUo-SeEOmtHAj1xVeS-FwAl_3D76wcMXJWvQNCwaFPbYMPRnanCw1u0kgqMBuzsfrxKDeqLuLtqIa0q8/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTJ4CytpuMrVyPb4hA2zuGJq8rWUXw-g72eQLbFbFEc4m-6PkHmRafTwb36KFttehu25rkLcNn-Lt24865WzK9073UP1pnws7pzxg1f4O0LnbRkpWN6WMAfL0_segn12oPtp_6C5qKYM/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.