Ketik Judul Artickel....

BUTTON BACK TO TOP PADA BLOGSPOT

    Cara Membuat Tombol Back to Top di Blogspot. 


Fungsinya agar pengunjung blogspot agar tidak kram jarinya ketika mau ke pilihan menu artikel awal. Oke, langsung saja ikuti langkah-langkah berikut ini. Script ini cukup sederhana, menggunakan CSS dan JQuery. Oleh karena itu kamu harus memasang kode JQuery di template blog.


1. Pastikan di template kamu sudah terdapat kode JQuery seperti ini :


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>


Kamu bisa cek terlebih dahulu, caranya :

Tekan CTRL + F untuk melakukan pencarian

Cari kode tersebut diatas 

</head>

Catatan : Ada banyak versi kode JQuery, saya menggunakan versi 2.x, jika sudah terpasang versi lain abaikan langkah ini. Tapi saya sarankan menggunakan versi 2.x .


Jika belum ada kode JQuery, lakukan langkah berikut :

Masuk ke blogger, Tema > Edit HTML

Salin kode JQuery diatas


</head>


Simpan 


2. Klik "Tata Letak" (Layout)

3. Klik "Tambahkan Gadget" di Sidebar

4. Pilih HTML/Javascript

5. Copy dan paste kode berikut :


 <style>

.mbw-back-to-top {

    position: fixed;

    bottom: 8px;

    right: 10px;

    text-decoration: none;

    display: none;

    cursor:pointer;

    width: 40px;

}

</style>

<img class="mbw-back-to-top" src="http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/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>


    Catatan : Kode yang berwarna merah adalah gambar tombol navigasi back to top. Kamu bisa menggantinya dengan gambar yang lain.


6. Klik Simpan.


    Untuk mengambil button gambarnya kalian bisa kunjungi di blog https://blogcahti.blogspot.com/2017/07/membuat-tombol-navigasi-back-to-top.html?m=1