Cara Pasang Widget Back To Top di Blogger

Widget Back To Top di Blogger adalah tombol yang muncul otomatis di bagian bawah halaman blog yang berfungsi untuk memudahkan pengunjung kembali ke bahagian atas halaman dengan mudah.

Cara Pasang Widget Back To Top di Blogger

Pada dasarnya tombol ini digunakan untuk memudahkan pengunjung menggulung layar halaman blog yang memuat artikel terlalu panjang ke bawah, agar pointer halaman blog secara otomatis menuju ke bahagian halaman paling atas.

Tombol ini harus bekerja sedemikian rupa, diatur agar muncul secara otomatis hanya pada saat layar memuat halaman artikel yang terlalu panjang dan posisi  halaman sudah melebihi batas bawah layar.

Sehingga ketika pengunjung memutuskan ingin kembali ke bahagian atas layar maka dengan mudah dapat menekan atau klik pada tombol tersebut dan secara otomatis akan menggulung layar ke bahagian atas halaman dengan sendirinya.

Cara Pasang Widget Back To Top di Blogger

1. Masuk ke Dashboar Blogger
2. Klik Template >> Edit HTML
3. Cari kode </head> kemudian paste kode berikut di atasnya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
Jika dalam template Anda sudah tersedia script jQuery sebelumnya abaikan langkah di atas.
4. Selanjutnya kopikan kode di bawah ini tepat di atas kode </body>
<script type="text/javascript">$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#top").fadeIn()}else{$("#top").fadeOut()}});$("#top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script>
2
<a href="https://www.blogger.com/null" id="top" style="bottom: 1px; cursor: pointer; display: none; font: 12px arial; position: fixed; right: 0%;"><img src="http://lh3.googleusercontent.com/-uaO-GjCMRHY/U9FN4YarXMI/AAAAAAAAKUY/1mXlAMwFpwk/s43-no/Back To Top.png" height="43px" width="43px" /></a></script>

Simpan template. Selamat menikmati widget Back To Top di blog Anda.

Lihat juga: Cara Mengatasi Layout Template Blogger yang Tidak Rapi
SHARE

Unknown

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment

0 comments:

Post a Comment