Laman

Cara Memasang Tombol Back to Top di Blogspot



Penggunaan Widget merupakan daya tarik untuk mempercantik blog asal jangan terlalu banyak widget yang dipasang karena hanya memperberat akases loading blog tersebut. Widget yang dipasang ini merupakan Widget tombol Back to Top dimana ketika pembaca blog menarik scroll ke bawah maka otomatis tombol Back To Top akan muncul dengan Tombol "Back to Top ini" memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya

Langkahnya adalah sebagai berikut:

1.       Login Ke Blogspot
2.       Selanjutnya tambahkan terlebih dahulu kode java script di atas tag </head&gt;dengan cara masuk kemu template kemudian klik edit html. Dan cari kode </head&gt;gunakan ctrl+F untuk mempercepat pencarian.

Kode Javascript

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


Hasilnya seperti berikut



3.       Setelah Langkah No 2 dilakukan klik menu tata letak kemudian tambahkan Widget HTML/Javascript dan paste kode dibawah 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/AVvXsEjA4kI_9GcFtfBDdfF_88sySqZxBx_NkcBB-zVynT86HLb-cCGDoG0k75RM5LHAZm3FIq62hyVu-zth89ZUuHzP-l5fUXMARNjpDVJovEzXZRA67_Gm5XJRDnR1FWJfAYwtQAeIq6WkmgU/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>





4.       Selanjutnya Save. Dan lihat hasilnya



Tulisan warna hijau adalah link Model Tombol Back To Top. Untuk Menambahkan Model Back To Top anda bisa lihat Refrensi di Blog ini

Selamat Mencoba


Salam Padepokan IT