Cara Memasang Back To Top Di Blog

tujuan cara memasasng back to top adalah mempermudah kembalai ke atas postingan dengan satu klik
selain itu tombol back to top bisa membuat blog lebih keren dan terkesan elegan,

jika ingin memesang tombol back to top , mari simak tutorial di bawah ini


1 . pastikan template anda sudah di lengkapi jquery seperti di baah ini

                         

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

                atau di bawah ini

                       

  <script src='<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/AVvXsEgEMK0DUBBfLUgn-vlIr-oROuIbQp83ENnYiD_5GMP6wgavld1z3y7-e7gFJU-_S9QWaeYM3dyOKhqxxFBO-Np8MFL7DQjfSPe6SixJoQpsReNgJmt-T-9DOa4U8QJmE2Zhgp7v2ZprOXw/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>

NB: kode yang berwarana biru bisa anda ganti sesuka sobat dengan url gambar yang di inginkan
berikut beberapa contoh gambar dan kode url di bawah nya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFRV0JWsYoxXja6wJsTD7dudCeMk8zmIpHrjpYpn3ZUD7O2EKGci-FYqXgMoFOX47nPV0Wl30NOhyphenhyphenWgcH23EqkE1R749q0eioya2pFPEMS5-RT7lNNhcDmlUZGmZ1HwW6aZ90x5gfH_Xvp/w133-h140-p/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjytJsdv6bOT0L5l58K6XrghjaQ50u0cjuxGPBvzBQc_lOzCSK6ACgOGVtU70H0IzQcLSA4PoCSGxldech0G-vcfUjs37CuiiSyOLxK1QrXGg264m8TYZj4J5F23fH1TBrhcXbCQqv14dfO/h120/back-to-top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRJTEfd_kXtQ-HLUJzE-BDG8jV0HGDX26UaQMZYwU_Tj1xjt-VOpszyb0DZIotHjZC8D_FVIo-4hRVEGWyjzdgAwxy18ataYEiccdM1uJxjYPmuGUrK3fbElfFhhGnrWw6GdckGZnrGVk/h120/Crystal_Project_Player-top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TT9hyphenhyphena0OhFAxPzbXCHUUPZHIcaYjuWshRji8mTMNvsG6TSHfOMsO9DGOuiCX2bmwAvM95JoVq5mS3GwX_ATorQ4EMBxzgDZTe5Hxtrc8VgncA-KycJOQ7y7iXspiPDOkGTg3V-JZDxoV/h120/RETURN-TO-TOP.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHU3lkuw64OFCRs8BoQV7kTJP5-ttr2dSzu0JukKKckldJEvwQcxjIz-VNf1_-Tw43MC9KXhYqnXCj1HucbT5nAC_7f3fCvXHExOapyvFfHpQAxAZKv0DUyUf7s8dDKysAVVZw5b1eCQv/h120/top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_h9S82_KX2PpgDc7oe_6Up5DklUekJpIfXDZQcag_RL-igBkQwNosJPzP4G_fb2tZNCunL17tsmNqlRFghkjTt4MyS68qMNWxFwxdRZiBIOhuPdH8jiC5uH4S5m8YFa_45s6K_ISSxKq/w140-h140-p/topbutton.png



sekian tutorial nya semoga bermanfaat
kritik dan saran anda saya tunggu di komentar