Cara Mudah Memasang Tombol Back To Top

Cara Mudah Memasang Tombol Back To Top

Baca Juga

Cara Mudah Memasang Tombol Back To Top

Kali ini saya Bang dimar mau menulis Cara Mudah Memasang Tombol Back To Top  Saya rasa tombol back to top ini sangatlah penting dipasang dalam blog karena bila orang membaca artikel kita dan ingin mengulang dan memahami artikel dari awal pembaca tidak usah susah susah menyecrol dengan berulang ulang, dan dengan adanya tombol back to top hanya sekali klik saja sudah sampe ke awal postingan. Bagi sobat sekalian bila di templet anda belum terpasang tombol ini ada baiknya anda mencobanya.

Untuk  Cara Mudah Memasang Tombol Back To Top ini saya rasa cukuplah gampang banget dan perhatikan langkah langkahnya sebagai berikut:

1. Anda memastikan dulu dalam blog anda sudah terpasang jquery bila belum terpasang silahkan pasang dulu kodenya seperti ini

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

Atau bisa yang ini

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

2. Cara memasangnya anda masuk ke blog pilih edit HTML kemudian letakkan kode diatas tepat diatas atau sebelum kode </head>
Kemudian tekan save

3. Selanjutnya anda klik layaut/ tata letak
4. Klik Add gadget di sidebar
5. Pilih javascript
6. Pastakan kode berikut di kolom yang tersedia

<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/AVvXsEiIOnS2gUyig5wHqJxxF_DiJnAPLPpxbURuCW4NFs3pN3ySZahEVliRUqsisKgW7M-0sOncENXwXhcf1RCzErf5DT2IdtWePGxQz5TLENNdy9PMxeWdPh5SeV52mH_L8YBnyqdwUkosmbA/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>

Kode yang berwarna merah adalah kode gambar back to top dan anda bisa mengganti ikut selera anda
Selanjutnya tekan save dan lihat hasilnya anda sudah memiliki tombol back to top.

Demikianlah Cara Mudah Memasang Tombol Back To Top semoga bermanfaat.

Baca juga:
Cara mudah membuat popular pos jadi warna warni