Cara Membuat Back to Top di Blogspot

Kali ini saya akan menjelaskan bagaimana Cara Membuat Back to Top. Contoh dari back to top ini bisa kalian lihat di pojok kanan bawah pada blog LangitWebKu.

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

3. Klik Add Gadget atau Tambahkan Gadget di Sidebar

4. Pilih Javascript/HTML

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 : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UZHXrpl9-9Sow_DkT2_DsTGFfoZXkkyCs9nj26gv2CtZx6RxN6rGv6EYNtKL3y8iYtuYNEpRdawSuNab7LnYgWxKSjXe5YBFccvD92RFbzjyqXCddx4F1iIvcc636TeBdUIS7S1EfYU/s1600/back+to+top.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4yIAy8dlHdt0_4U8NSRavgvC-6hA0qx7ZNQXWbb1caYaOrpgQFlf_RSNHHYtvbKCoOzIDOjUFbABsTvxuW88mZvBV_taa08YRm5dlZFiDqFPiL1hRR_YcUDinpfcjk-21w8acEYhzYk/s1600/back+to+top.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmu8sGUUkcG2H0v2beq-7RBiQ6LzWAuPTqrczd744qcxmBsEt2AaguDz5yUQJxhyRLMaTww27tpDbH2GsWyl4p4KOPnWjJBP-9W1KqZaVEYBUA5NnwIDgUfgbK8BScjgHzDJrtVp3EwA/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdLdz_ddlXdYJXmKGAWOUHMi2YxAvud8u7nss1a0VyoQohqDzHDGqGBHNLgJ8_AadbBQfKO6SOpENZq2wLAV4WulDUCO19dU2DS6dURBi-tlmvBjLsqxkR05yKR5w_k_ja-t2Q6l8zw0/s1600/back+to+top+button.png

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4C__pJPM0s8sPQLhlsFxfq0GOjju8aUGKp2CNuaT38TYfIvVY1usK4WhVP131okpqfjnvFm0XBznnQMW8qaM0zY5-2acSzgR8IVX3cPIFVUsr7SDvK-rUJ4AG-SumtJZitCKgA0PFARo/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Fzht8brT_1yKDJr595oQWnYymCeTmd2-UycS7f4eyci-8-5oBiU4PVfdLxdzZ7YPPvyVQ-k4nCQurXx0OXHw_6XnOShonlNcniVKi4n6l8SGkT5_hkCF-lrJVBSgi2FT55Qg1ZHp2Ns/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVSmaDgyIVzNTfXPGuwH-waAJJnD4tSWpBidBGg16kIkyjkl3m8sD_DH_lU3W5vcEeATmiBh29FWWKsYIfGRslul0a1hFAhtWMf-J2daPwVuD_hiLIxv6L1JFtApQldBRpnf1D6NnV6A/s1600/back-to-top-button.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0ewcPOyDmeO_D6vjh1S583Z5RpBg8ABUC5PZl7A-n1uM-W1iBgVEWL5PHhrWmwcTls8ZGkvxgrcDhdl7zf4HPG3CAtx4vBXUJbOXG-IbUWENxQvsF4ySxijBErCaeazNZ0UoWK_JWsg/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOE9FCzWRVQRKTbvJ6cDywpfZ2zqGkR2E2kN57ZTuXmzFW19_wkqkLYscLAaNsnkMLjrFnSjGVKIMRW6l7QtOE6D5MaBnLJPEHqsu0tYml0xdjr_sobZgUzFlmGWVtL1PX52JykCq0tGo/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpvapdMwQ1-5Igwb80daEusvvFcWgRmySMu1qVDTETmBI9hYlNg0QP-EN0JHco8Aq61cKVG6T_L9trgR90MNPQtyhTfCG1y4GZ6-6NEGSnKUEXQ5pClGpGmIN6y62aBbyrCcAwCuixU4I/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 :D