Blogger Scroll to Top With jQuery

Blogger Scroll To Top With jQuery adalah sebuah tombol yang kegunaanya untuk kembali ke atas (bagian atas halaman blog/situs Anda). Memasang tombol ini makan akan semakin mempermudah pengunjung bahkan Anda sendiri (sang pemilik blog) untuk mempermudah kembali ke atas.

Contohnya bila pengunjung telah selesai membaca article Anda dan mereka berada di bagian postingan paling bawah blog Anda, dan merekan ingin menuju menu navigasi yang berada di atas maka mereka cukup menekan tombol Scroll to Top yang telah anda sediakan dan yang telah Anda instal pada blog/situs Anda.

Sebelumnya blog Oto Website pernah berbagi tentang widget ini juga dengan tampilan yang berbeda yang berjudul Memasang Tombol Smooth Scroll to Top With jQuery.

Untuk perbedaaannya Scroll to Top ini, tentu saja ada perbedaannya, Anda cukup melihat satu gambar di postingan sebelumnya maka anda akan tau perbedaannya. Saya pribadi lebih suka dengan postingan sebelumnya.

---

Cara Menginstal Blogger Scroll to Top With jQuery

---

Sama seperti postingan sebelumnya, untuk memasang Blogger Scroll to Top With jQuery ini juga sangat muda, ikuti langkah-langkah berikut untuk mulai menginstalnya pada blog Anda.

1. Masuk ke Akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template Anda cari kode berikut:

</body>

5. Bila kesulitan mencarinya coba klick DISINI.

6. Sekarang letakkan kode berikut tepat di atas kode tadi.

<!-- Strat scroll By Oto Website-->
<style type='text/css'>
#OW-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr("href");
    if ($(window).scrollTop() != "0") {
        $(this).fadeIn("slow")
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
        $(scrollDiv).fadeOut("slow")
        } else {
        $(scrollDiv).fadeIn("slow")
        }
    });
    $(this).click(function() {
        $("html, body").animate({
        scrollTop: 0
        }, "slow")
    })
    }
});
$(function() {
    $("#OW-StoTop").scrollToTop();
});
</script>
<a href='#' id='OW-StoTop' style='display:none;'>Scroll to Top </a>
<!-- End scroll By Oto Website -->

7. Simpan template.

Sekarang Anda bisa lihat sendiri hasilnya pada blog Anda.

sumber

Related Post: