CARA MEMASANG ICON BACK TO TOP PADA BLOG

 By: Unknown    9:27 AM  No comments

Cara membuat icon Back To Top seperti contoh gambar di atas,gambar back to top akan muncul jika halaman blog sudah di scroll ke bawah

Untuk hal yang pertama silahkan anda perhatikan bahwa di template blog anda suka memiliki kode jquery seperti kode di bawah ini

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

Atau yang seperti ini

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

Jika template blog anda belum memiliki seperti kode di atas

Ikuti langkah berikut :

1. Pilih pengaturan template lalu edit html

2. Cari kode </head> bisa dengan (Ctrl+F)

3. Copy salah satu kode di atas lalu Paste kan di atas kode </head> lalu klik save

4. Klik layout (TATA LETAK)

5. Klik add gadget di sidebar

6. Pilih JavaScript/HTML

7. Copy Paste kan kode di bawah 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/AVvXsEg5r4pKA9DBhsLr8AAbDwhCntQlV79jflnVwHLdgTyavnLEzPjRwP58nFZSfuU3VPdHBziSwKg2PHELRS9g5MN6p3x7TQV5Pm_pR_Pnbj73UvfD1JXuCvaj3yytTz25EtaeEgG3rsH7su8/s1600/back+to+top+blue.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>

8. Ganti kode yang berwarna merah dengan dengan kode icon yang anda suka

9. Lalu klik SAVE

WASSALAM....!!!!!