Cara Membuat Smooth Back to Top dengan jQuery di Blog


Smooth Back to Top dengan Jquery. itulah yang akan saya share pada kesempatan kali ini, fungsi dari tombol back to top ini adalah sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Sebetulnya tutorial kali ini banyak yang sudah memposkan, saya juga dapat kode-kode aneh ini dari teman saya MDF Blog, dan saya hanya memodifikasinya sedikit tadinya berbentuk seperempat bulat, dan saya modifikasi sedikit dan bentuknya menjadi atas kanan dan kiri menjadi agak bulat sedikit, dan kebawahnya lurus, demonya bisa dilihat diblog ini dipojok kanan bawah.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut:
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
/* Smooth Back to Top dengan jQuery */
#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px solid #333; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; width:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }
#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }
4. Kemudian letakkan kode berikut ini diatas kode </body>
<!-- Smooth Back to Top dengan jQuery -->
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>
5. Simpan Template
Silahkan anda sesuaikan sendiri dan edit-edit. Semoga Bermanfaat.
Source : MDF Blog

21 komentar untuk "Cara Membuat Smooth Back to Top dengan jQuery di Blog"

  1. Asiknya kalau pertamax. Coba dulu yah sob. kayaknya keren kalau di blog saya :d

    BalasHapus
  2. waaahh pertamax udah ada yg sikat...
    apa saya sikat ajah ya ornag yg ngambil pertamaxnya.. haha :D

    BalasHapus
    Balasan
    1. haha jangan disikat sob, tapi di asah di tembok aja sob, haha, cuman bercanda :>)

      Hapus
    2. kaaaaabuuuuurrrr, Mas Abdul mau menyikat saya @-)

      Hapus
  3. Keren-keren, Sudah saya terapkan.. oh iya ini template bagus buat blog baru, x-) soalnya saya pernah pakai masuk Pagerank semua Artikelnya.. (b)

    BalasHapus
    Balasan
    1. makasih sob, maksudnya gimana sob ? :-? page rank blog saya Not Avaible, solusinya gimana ya ? :-?

      Hapus
    2. Bukan dapat pagerank sob :-) Artikel yang ditulis rata-rata ada dihalaman 1 google :>)

      Hapus
    3. Bukan yang pertama bisa juga 2-10 tetapi dihalaman 1 (o)

      Hapus
    4. owh maksud sobat artikel saya cepat terindex google ya ?, haha iya sih emang template yang saya pakai SEO, skor di demonya 94%. entah karena saya sering ganti template skornya jadi makin menurun ;-(

      Hapus
    5. Sebenarnya berganti2 template itu tidak apa2 hanya saja bagian METATAG tidak diubah dan struktur H1,H2 dll tidak diubah. Bisa dibilang hanya bagian B:SKIN dan HTML saja

      Hapus
    6. iya betul sob, tapi saya ganti templatenya selalu Faster Clean White, tapi kok klo sekali ganti template skor SEO nya turun 2-5%, klo dulu template ini skor SEO nya 94%, sekarang sudah menurun [-(

      Hapus
  4. Balasan
    1. makasih bray, ok akan saya lanjutkan, hehe :-d

      Hapus
  5. keren efeknya sob,kelihatan smooth

    BalasHapus
  6. Balasan
    1. makasih sob, silahkan dicoba
      blog sobat sudah saya kunjungi, saya mau tanya sob, apakah di blog sobat muncul iklan aneh ?

      Hapus
  7. I am terribly happy to scan this. this is often the sort of manual that must be and not the random info t hat's at the opposite blogs. Appreciate your sharing this best posting. agenbolabonus.org

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top