Membuat back to top di blogger

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara membuat ombol back to top di blogger tanpa jquery.Alhamdulillah di kesempatan kali ini saya akan share cara membuat tombol back top di blogger dengan menggunakan jquery.
Dengan memeanfaatkan jquery,memungkinkan kita dapat membuat tombol back to top dengan menggunakan gambar kecil (icon) yang pastinya tampilannya lebih menarik.
Sudah tidak sabar lagi untuk mencobanya?Baiklah,silahkan anda baca dengan baik dan semoga mudah difahami.

CARA MEMBUAT BACK TO TOP DI BLOGGER
1.Pertama-tama silahkan anda kunjungi dashboard blogger anda masing-masing di blogger.com.
2.Di halaman dashboard blogger,silahkan anda klik Tata Letak.
3.Berikutnya silahkan anda klik Add Gadget (Tambahkan Gadget),seperti contoh gambar dibawah ini.

4.Nanti akan muncul berbagai pilihan gadget yang dapat anda pasang di blogger,silahkan anda klik HTML/JavaScript,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda  masukkan 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/AVvXsEgMAz9Ss63N3Poynn9OEe1Ft_XIFawmXNfpEyAPFDwQN4PU7-hA0rCsutMMCSxnTnTEeBUgGfj4DvFm2S5ZXkXiCrj836nlD7-L_UnGH1iN-NgCm_L04va6cqoZu2MGB7-O5kVfn-aDHbs/s50-Ic42/button-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>

Tambahan:
Kode yang saya beri warna hijau adalah kode URL gambar (icon) untuk tombol back to top dengan ukuran 50x50 px.Anda bisa menggantinya dengan URL link gambar yang anda sukai atau sesuai dengan selera anda masing-masing.

6.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

Apakah sudah selesai? Belum ! Karena kita harus menambahkan jquery kedalam template blogger agar kode dapat berjalan dengan baik.

CARA MEMASANG JQUERY DI TEMPLATE BLOGGER
1.Silahkan anda klik Template > Edit HTML.
2Berikutnya silahkan anda cari kode </head> (silahkan gunakan CTRL+F untuk memudahkan pencarian apabila anda menggunakan PC).
3.Berikutnya silahkan anda masukkan kode berikut ini tepat diatas kode tersebut.

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

Perhatian:
Apabila kode seperti diatas sudah ada didalam template blog anda,maka anda tidak perlu lagi memasang kode tersebut (abaikan saja),karena jika ada 2 kode (dobel) maka script tidak akan berjalan atau gagal.
4.Jika sudah,silahkan anda klik simpan untuk menyimpan perubahan.

Berikutnya kunjungilah blog anda,jika anda berhasil maka tombol back to top telah muncul di blog anda.
Demikianlah cara membuat tombol back to top di blogger,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

• Tweet
• Share
• Share
• Share
• Share