Membuat gadget Back To Top yang menggulung secara halus pada blogger menggunakan jQuery

Blogger Gadget Back To Top
Jika artikel pada postingan anda lumayan panjang, ada baiknya anda menambahkan gadget “Back To Top” atau “Kembali ke Atas” pada template anda. Gadget “Back To Top” ini berfungsi sebagai tombol yang ketika di klik akan mengembalikan halaman anda ke posisi atas. Tombol ini tidak akan terlihat ketika anda masih pada atas halaman, tetapi ketika anda menggulung halaman ke bawah, seketika itu juga gadget “Back To Top” ini akan muncul, dan jika anda mengkliknya maka halaman anda akan menggulung secara halus ke atas halaman.
Untuk membuat gadget in cukup mudah, yang anda butuhkan hanya menambahkan gadget HTML/Javascript pada template anda, untuk posisinya terserah anda, dikarenakan gadget ini akan selalu berada di sisi kanan bawah halaman anda. Berikut langkah yang harus anda lakukan untuk membuatnya.
  • Masuk ke Blogger Dashboard anda dan pilih Blog yang inginkan
  • Pilih Tata Letak
  • Di dalam Tata Letak, klik Tambahkan gadget (lokasinya terserah anda)
  • Dari pilihan gadget yang ada, pilih HTML/Javascript dan masukkan kode script berikut:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>


<script type='text/javascript'>$(function(){  $(window).scroll(function(){    if($(this).scrollTop()!=0){      $("#ndb-top").fadeIn()    }    else{      $("#ndb-top").fadeOut()    }  });  $("#ndb-top").click(function(){    $("body,html").animate({      scrollTop:0    },800);    return false  })
});</script><a id='ndb-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'>
<img src='https://lh3.googleusercontent.com/-D29WX6gDYKE/UVPCDFX3KkI/AAAAAAAAAR0/sjnInoXjiiY/s64/top.png' width="64px" height="64px"/>
</a>


  • Pilih Simpan untuk menyimpan gadget anda.

Begitulah cara membuat gadget “Back To Top” pada blogger. Jika anda telah mengggunakan jquery pada template anda, skrip berikut tidak perlu anda masukkan :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
Comments
0 Comments

Tidak ada komentar:

Posting Komentar