Cara Memasang Tombol Back To Top

Kali ini Blog Johart akan membahas informasi mengenai Cara Memasang Tombol Back To Top di Blogger, dan silahkan Anda ikuti tata cara dibawah ini:

1. Pilih menu Template > Edit HTML

2. Cari </head> , lalu letakkan kode di bawah ini tepat di atas kode </head>

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

3. Kemudian Klik "Layout" (Tata Letak)

4. Klik "Add Gadget" di Sidebar

5. Pilih "Javascript/HTML"

6. 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/AVvXsEhwMoasghf3KMntoNbHbhWHl1boHzt89OyUuW0PW3wJ1HkLHggCpuvieb4hXGh42ZLMzVkzoJbvhYNo3fyrz58RxIAS4v-S8O6c5yXSsn9SnSpkePkgRDtBmxTAOr34_ABaYJQA_Qp2NHA/s1600/back+to+top+button.gif" />
<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>

7. Klik SAVE , dan lihat hasilnya.

Itulah Cara Memasang Tombol Back To Top di Blogger dengan sangat mudah, silahkan di praktekan.

Tweet