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.

Bagaimana apakah Anda berhasil menerapkannya pada blog Anda? Silahkan tinggalkan tanggapan atau komentar Anda tentang tutorial di atas!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top