Cara Memasang Back To Top di Blogspot

     Tidak jarang sebuah website kontennya begitu panjang kebawah sehingga ketika kalian membaca artikel sudah tidak sadar bahwa kalian men-scrool artikel jauh kebawah. Ketika ingin kembali ke bagian atas dari website itu beberapa orang akan merasa malas ketika harus men-scrool jauh keatas dan menurut saya itu kurang efektif karena harus men-scrool terus menggunakan mouse.

Untuk mengatasi kasus tersebut, saya akan memberikan cara bagaimana membuat sebuah tombol back to top yang dapat kalian tambahkan pada website kalian agar user dapat dengan mudah dan cepat kembali ke bagian atas dari halaman website dengan cara meng-klik tombolnya. Jadi tidak perlu lagi men-scrool ke atas. Langsung saja saya akan memberitahu caranya.

Langkah-langkah Memasang Back To Top di Blogspot :
1. Pastikan template blog kalian sudah ada kode Jquery seperti dibawah.

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

Atau

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

Jika belum ada :

| COPY salah satu script diatas.

| Buka Template - Edit Html.

| Ctrl+F masukan kode </head> - Tekan Enter.

| PASTE script di atas kode </head>.

2. Klik layout Tata Letak.

3. Klik Tambahkan Gadget di sidebar.

4. Silakan pilih HTML/Java Script.

5. Copas script 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/AVvXsEjZxDfHWP5O6JuROQaJEbhmdRMuttxm_rpIxQekUJzMC_HLGUUj8s78EokYeIh3_CFshNUzcK9Fr7bvDm2Ntxd9UtHWHTCtDrEpsJtFySCH_LtIiK1hHEE2Msz7yIVl6iGWbDRDBhcU5ZE/s1600/back-to-top-button.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>

Script yang berwarna Hitam adalah URL Image Back To Top. Kalian bisa menggantinya sesuai keinginan kalian. 
Kalian bisa mencari gambar tombol back to top dengan keyword "gambar back to top png" dan mengubah ukurannya jika terlalu besar. Sekian tutorial dari saya semoga bermanfaat dan menambah ilmu pengetahuan bagi kalian. Terimakasih :)

Don't let fear or insecurity stop you from trying new things. Try and do it.
(Jangan biarkan rasa takut dan gelisah menghentikanmu dari mencoba hal-hal baru. Cobalah dan lakukanlah).