Efek Persentase Scrollbar Di Blog

Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi atau isi yang belum terlihat di layar monitor. Scrollbar ini keberadaan dan fungsinya sangat penting karena memudahkan pengguna atau pengunjung untuk menjelajah konten artikel.

Berbicara tentang scrollbar kebetulan saya pernah mengunjungi suatu blog yang memiliki tambahan aksesoris scrollbar berupa efek persentase scrollbar yang unik. Efek ini memberikan info kepada pengunjung blog sudah berapa persen halaman yang discroll. Nahh... untuk contoh bisa dilihat di blog monozcore. Saat halaman yang sedang di scroll maka akan muncul angka yang menunjukan indikator persentase di samping scrollbar wuih pokok 'e kueren.... gimana sobat tertarik untuk memasang efek scrollbar ini ??? oke deh kita langsung aja ke TKP....

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Apabila sobat sudah memasang kode Jquery silakan lewati pemasangan kode jquery ini, apabila belum memasang kode jquery silakan copy paste kode di bawah ini dan taruh tepat di atas kode </Head> ini.

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>



• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.

  <style>
  #scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 10px;
  z-index: 500;
  padding: 3px 8px;
  background-color:#1e598e;
  color: #fff;
  border-radius: 3px;
  }
  #scroll:after {
  content: &quot; &quot;;
  position: absolute;
  top: 50%;
  right: -7px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: rgb(139, 175, 28);
  }
  @media screen and (max-width:600px){
  #scroll{
  display:none;
  }
  </style>



• Cari kode </Body> kemudian taruh kode script di bawah ini tepat di atas kode </Body>.

  <script type='text/javascript'>
  //<![CDATA[
  var scrollTimer = null;
  $(window).scroll(function() {
  var viewportHeight = $(this).height(),
  scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
  progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
  distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
  $('#scroll')
  .css('top', distance)
  .text(' (' + Math.round(progress * 100) + '%)')
  .fadeIn(100);
  if (scrollTimer !== null) {
  clearTimeout(scrollTimer);
  }
  scrollTimer = setTimeout(function() {
  $('#scroll').fadeOut();
  }, 1500);
  });
  //]]>
  </script>



• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.