Cara Membuat Tombol Back To Top Widget

Tombol Back To Top Widget - Memiliki banyak konten berarti banyak bergulir. Ini membantu untuk membuat sesuatu yang sedikit lebih mudah bagi pembaca Anda jika Anda termasuk cara mudah untuk melompat sepanjang perjalanan kembali ke atas halaman. Menambahkan Back To Top tombol dapat dengan mudah memecahkan masalah bergulir dan benar-benar sederhana untuk menerapkan. Saya telah menyertakan benar-benar mudah Kembali ke tombol Atas sini untuk Anda bahwa Anda dapat menambahkan ke website atau blog. Yang Anda butuhkan untuk mengedit adalah file CSS tema dan utama file HTML Template.

Cara Membuat Tombol Back To Top Widget

Berikut langkah - langkahnya :

1. Untuk awal menggunakannya masuk ke Template > Edit HTML
2. Pastikan di template blog Anda sudah ada kode jquery, yaitu kode seperti ini jika tidak ada letakkan kode dibawah ini tepat diatas </head> dan copy salah satunya :

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

atau 

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

3. Klik "Layout" (Tata Letak)
4. Klik "Add Gadget" di Sidebar
5. Pilih "Javascript/HTML"
6. Copy dan Paste 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/AVvXsEhID_El7B1orM5sRgA5NvZ83yJcUS_idF4r-wPnG80X5Rfef6QLtVJXC1xxWSLO8aoJlrRheZgLPWclZibISsAmHR1i6B3htDOvgHtcCgdg4VAreLd-98abviwSiEiiQRU-ZJF1UhQMgb4/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>

<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/AVvXsEhID_El7B1orM5sRgA5NvZ83yJcUS_idF4r-wPnG80X5Rfef6QLtVJXC1xxWSLO8aoJlrRheZgLPWclZibISsAmHR1i6B3htDOvgHtcCgdg4VAreLd-98abviwSiEiiQRU-ZJF1UhQMgb4/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>

Untuk warna merah anda dapat mengganti linknya sesuai gambar yang anda inginkan. Simpan template Anda dan Anda harus melihat Kembali ke Atas Link muncul saat Anda gulir ke bawah halaman. Demikian informasi tentang Cara Membuat Tombol Back To Top Widget. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.