Cara Memasang Back to Top
1. Pastikan di template blog Anda 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 seperti ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Kalau belum ada, lakukan langkah ini:
- Template > Edit HTML
- Cari (CTRL+F) kode </head>
- COPY salah satu kode tersebut dan PASTE di atas kode </head> tadi.
- Save!
2. Klik "Layout" (Tata Letak)
3. Klik "Add 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrHSsHEg1fx5OKNboLqY6VY7GUczsawL3kQcgq8fkyKjXvG3H8C7XLAqpQHT47xbAJgR6ciW3eI5IIpw5Qn7fy3C3__JW8cwtfJwxmtL-WzNq776OJi3skoMinLxj93I6DzgBj963EI0/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>
.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrHSsHEg1fx5OKNboLqY6VY7GUczsawL3kQcgq8fkyKjXvG3H8C7XLAqpQHT47xbAJgR6ciW3eI5IIpw5Qn7fy3C3__JW8cwtfJwxmtL-WzNq776OJi3skoMinLxj93I6DzgBj963EI0/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>
Kode yang berwarna merah adalah image "Back to Top". Anda bisa menggantinya dengan gambar lain sesuai dengan selera Anda, juga sesuai dengan background blog Anda.
