Cara Mudah Membuat Back to Top di Blogspot

Cara Memasang Back to Top

1. Pastikan di template blog Anda (cek di Tema > Edit HTML) sudah ada kode jquery, yaitu kode seperti ini:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/>

Atau

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>


Jika belum ada, kalian bisa menambahkannya secara manual :
– Tema > Edit HTML
– Cari (CTRL+F) kode </head>
– Copy salah satu kode diatas dan PASTE di atas kode </head>.

– Save!
Lanjutkan ke langkah kedua.

2. Klik Layout atau Tata Letak

Cara Membuat Back to Top

3. Klik Add Gadget atau Tambahkan Gadget di Sidebar

Cara Membuat Back to Top

4. Pilih Javascript/HTML

Cara Membuat Back to Top

5. Copy dan Paste kode berikut ini:

 
<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class=”mbw-back-to-top” src=”URL Gambar Back To Top” />
<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>

6. Ubah URL Gambar Back To Top dengan gambar yang kalian suka. Berikut beberapa gambar back to top : 

 Back to Top di Blog
http://4.bp.blogspot.com/-nhvmIT-UOiY/USDh-EyeKDI/AAAAAAAAAjE/hjEdj5OMvO0/s1600/back+to+top.png
 Back to Top di Blog
http://3.bp.blogspot.com/-ggvoO88bhfM/USDi6IWVtFI/AAAAAAAAAjc/n4vpSkZgR00/s1600/back+to+top.png 
 Back to Top di Blog
http://2.bp.blogspot.com/-BkNGUImcIV4/USDcBMHYjqI/AAAAAAAAAig/qEtwRO4pH6Q/s1600/back+to+top.png
 Back to Top di Blog
http://3.bp.blogspot.com/-Urx3H8aFQmY/USDkbnvSsLI/AAAAAAAAAkA/Wm4OkKT9yRI/s1600/back+to+top.png
 Back to Top di Blog
http://3.bp.blogspot.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gif 
 Back to Top di Blog
http://3.bp.blogspot.com/-X5sq11nsiNY/USDiu1zNWSI/AAAAAAAAAjM/8Y6vn3Vx6kQ/s1600/back+to+top+button.png
 Back to Top di Blog
http://2.bp.blogspot.com/-PEmadyDjsUw/USDjUyqlWsI/AAAAAAAAAjs/oVRttmskRfc/s1600/back+to+top+button.gif 
 Back to Top di Blog
http://2.bp.blogspot.com/-3sXsLU1aW3s/USDkamRLRZI/AAAAAAAAAj4/UOoh-GJWUdI/s1600/back+to+top+button.png
 Back to Top di Blog
http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png 
 Back to Top di Blog
http://3.bp.blogspot.com/-yhJXvPXAuNw/UQLk-mySRjI/AAAAAAAAAXg/pIAnUf9q1c8/s1600/Back-To-Top.png
 Back to Top di Blog
http://4.bp.blogspot.com/-BWmnRp-sR9o/USDmkStjAcI/AAAAAAAAAko/q6nJN8bXMZ8/s1600/back-to-top-button.png
 Back to Top di Blog
http://2.bp.blogspot.com/-C3ZJY99YKfo/USDmD4KR-zI/AAAAAAAAAkY/3fO83hpF2Zk/s1600/back-to-top-button.png
 Back to Top di Blog
http://1.bp.blogspot.com/-b3YWne8aCdw/USDmXTnyUiI/AAAAAAAAAkg/SieNqYTVQKQ/s1600/back-to-top-button.png
 Back to Top di Blog
http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png
 Back to Top di Blog
http://2.bp.blogspot.com/-36z7H3mWlZ0/USDizr47anI/AAAAAAAAAjU/8SoPm-odD7I/s1600/back_to_top_button.png
 

7. Klik Simpan. Selesai, silahkan kalian cek apakah back to top sudah muncul atau tidak.


Sekian tutorial memasang tombol back to top pada blog blogspot. semoga bermanfaat 😀

 

Leave a Reply