Cara Pasang Widget Bouncy To Top

Cara pasang bouncy to top. Aha, satu lagi widget menarik yang ingin saya kongsikan kepada anda. Ia merupakan satu widget untuk memudahkan pengunjung dan pembaca blog skroll secara automatik terus ke bahagian atas blog. Widget ini selalunya akan menampilkan bentuk anak panah di bahagian bawah blog anda.

Anak panah ini jika diklik akan automatik membawa pengunjung terus ke bahagian atas blog. Saya pasti ramai yang tahu mengenai widget ini. Sebelum ini saya dah pernah beritahu cara nak pasang to top ini dalam blogspot. Dalam entri tu saya memperkenalkan widget to top ini dalam pelbagai bentuk illustrasi, bukan seperti kebiasaan iaitu anak panah kosong semata. Anda boleh rujuk entri tersebut di sini - Pintasan To Top Berimej

Cara Pasang Widget Bouncy To Top

Kali ini saya mahu perkenalkan widget yang sama, tetapi dengan sedikit efek yang menarik, iaitu bouncy. Bouncy kalau dimelayukan menjadi melantun... hoho .. perkataan bouncy ni kadangkala boleh terfikirkan benda lain .. hoho .. tapi dalam blog, ia adalah efek melantun untuk widget to top.

Widget ini apabila dipasang, ia akan menampilkan satu imej anak panah di bahagian bawah blog. Ia akan hanya kelihatan apabila pengunjung mula skroll lebih 50% ke bawah blog anda. Faham tak?

Ok. Macam ni, apabila pengunjung baca blog anda, setibanya pembacaan itu hampir ke akhir entri, imej anak panah akan muncul, iaitu selepas pengunjung skroll lebih dari separuh blog atau entri anda. Jika diklik anak panah itu, automatik pengunjung akan dibawa ke bahagian atas blog atau header blog. Cuma efeknya kali ini ialah setibanya paparan itu di atas, ia akan bounce atau melantun... macam bola kena pada dinding, ia akan melantun, maka begitulah adanya dengan widget bouncy to top ini.

Uhh jenuh dah explain, harap anda boleh bayangkan.

Kalau susah-susah sangat, cubalah anda pasang widget ini di dalam blog dan cuba lihat kesannya nanti.

Langkah Demi Langkah Pasang Widget To Top Dengan Efek Melantun

Cara nak pasang mulakan dengan langkah salin kod CSS di bawah ini. Nak mudah salin, klik dalam kotak tu, pastu tekan ctrl-A (select all), lepas tu tekan ctrl-C pada keyboard komputer. Letakkan ia di bahagian CSS blogspot anda. Lihat contoh akan saya tunjukkan kemudian.

#BounceToTop {
  background: #888;
  text-align: center;
  position: fixed;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  width: 30px;
  height: 20px;
  padding: 5px;
  display: none;
  border-radius: 2px;
}

#BounceToTop:before {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 20px 15px;
  border-color: transparent transparent #444 transparent;
  line-height: 0;
  transition: all 0.3s ease-out;
}

#BounceToTop:hover:before {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 20px 15px;
  border-color: transparent transparent #ddd transparent;
  line-height: 0;
}

#BounceToTop:after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 11px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9px 12px 9px;
  border-color: transparent transparent #888 transparent;
  line-height: 0;
}

Salin tampak (copy, paste) pada bahagian HTML template blogspot anda seperti contoh di bawah ini.

Siap bahagian satu. Untuk seterusnya anda perlu salin pula kod script di bawah dan letakkan sebelum tamat body iaitu diletakkan sebelum slash(/) body dalam HTML template blogspot anda.

<script type='text/javascript'>
//<![CDATA[
$(function () {
 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
   $('#BounceToTop').slideDown(200);}
        else {
   $('#BounceToTop').slideUp(300);}
 });
 $('#BounceToTop').click(function () {
  $('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);
 });
});
//]]>
</script>
  <div id='BounceToTop'/>

Save template HTML blogspot anda, lihat hasilnya.

Widget ini sangat bagus untuk blog yang ada entri yang panjang. Jika pengunjung dah skroll ke bawah, dengan satu klik sahaja, pengunjung akan dibawa ke bahagian atas blog. Jadi, tak susah payah la jari jemari nak pegang mouse atau klik up up pada keyboard komputer.

Semoga bermanfaat dan selamat mencuba.