Rabu, 26 September 2012

Cara Membuat Tombol Back To Top Dengan jQuery


By on 17.32

JQuery - Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website/blog. Sehingga memudahkan pengunjung suatu website/blog untuk kembali ke atas tampa menggunakan scroll.


1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
3. Simpan dan lihat hasilnya. Pasti kamu senang.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

10 komentar:

  1. mas saya gak mau gambarnya itu, bisa di ganti ndak mas?

    BalasHapus
  2. Ganti kode di bawah ini pada kode di atas

    span ^ /span

    Dan ganti dengan kode di bawah ini.

    img src='URL IMAGE'

    Dan ganti kata URL IMAGE dengan icon back to top, cari aja di google.

    Karena ga bisa nulis HTML kode di kotak komentar ini seblum kata span dan img tolong sisipkan kode <

    Selanjutnya setelah kode span dan URL IMAGE" sisipkan kode >

    BalasHapus
  3. alhamdulillah bisa mas, tapi tampilannya malah jelek hehehe
    mending pake yang dari mas ini. ok dah makasi ya mas banyak tutornya yang keren, termasuk merubah poskan komentar menjadi gambar sudah saya terapkan di blog hehehe.
    sekali lagi makasi mas.

    BalasHapus
  4. Sangat bagus sekali,saya udah menerapkan di blog saya..
    Kalau ada waktu silahkan mampir ke blog saya juga

    Terima kasih :)

    BalasHapus
  5. termksih sobat,,saya udh bsa,,kunjung blik y http://saktobek.blogspot.com

    BalasHapus
  6. Ijin copy ya sob di blog gue http://najmyjuaeni.blogspot.com
    Salam kenal

    BalasHapus
  7. Mantap gan... sudah sy pasang di blog sy http://ericklinklovers.blogspot.com

    BalasHapus
  8. mantap gan, terima kasih sudah mau berbagi caranya

    vickzkater.blogspot.com

    BalasHapus
  9. kaka kita bisa buat menu bar di blog

    BalasHapus