Cara Membuat Tombol Back To Top Widget

Cara Membuat Tombol Back To Top Widget - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Cara Membuat Tombol Back To Top Widget, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tombol Back To Top Widget
link : Cara Membuat Tombol Back To Top Widget

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.

Berikut langkah - langkahnya :

Untuk awal menggunakannya masuk ke Template > Edit HTML
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>

Klik "Layout" (Tata Letak)
Klik "Add Gadget" di Sidebar
Pilih "Javascript/HTML"
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/AVvXsEifOndCQPaWKSN0q9oE7GNLYSuwrtYYA4Wr8KUHfq52rnb7pz2DKXdtiL1KEhxXd3bmvs2Dkvo1z4lVfv1Bi-ozkyhkukQ27Sc_x33QcQj9im3XPpsa_8P1jzZKAcJetru3v2OAxrtv7jk/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/AVvXsEifOndCQPaWKSN0q9oE7GNLYSuwrtYYA4Wr8KUHfq52rnb7pz2DKXdtiL1KEhxXd3bmvs2Dkvo1z4lVfv1Bi-ozkyhkukQ27Sc_x33QcQj9im3XPpsa_8P1jzZKAcJetru3v2OAxrtv7jk/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. Terima kasih..

Sekian Artikel Cara Membuat Tombol Back To Top Widget

Sampailah kita pada akhir artikel Cara Membuat Tombol Back To Top Widget kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.

sobat sekarang membaca artikel Cara Membuat Tombol Back To Top Widget dengan alamat link https://naparom.blogspot.com/2018/05/cara-membuat-tombol-back-to-top-widget.html