Membuat Scrollbar Persentase pada Scroll Blog

Cara Membuat atau Memasang Scrollbar Persentase pada Scroll Blog | Assalamualikum wr.wb hai sobat blogger apa kabar malam ini sudah ngantuk ?? nah untuk mengatasi ngantuk nonton aja piala dunia 2014 ini hehehehehe, nah pada postingan kali ini saya akan share nih buat kalian semua yaitu Cara Membuat atau Memasang Scrollbar Persentase pada Scroll Blog .

Scrollbar Persentase merupakan suatu tampilan dimana pada saat kita menscroll bagian blog kebawah akan ada tampilan nomor atau persen seperti gambar diatas tersebut . dan juga jika kalian memasang tampilan persentase diblog anda masing masing anda juga bisa tahu berapakah jumlah yang anda scroll kebawah di blog tersebut .

Tetapi memasang scrollbar persentase ini sudah tidak asing lagi bagi kita semua dan hendaknya kita melakukan sesuatu yang baru , nah jika kalian menginginkan contoh atau DEMO pada persentase scrollbar anda bisa melihatnya dibawah ini .

Demo

Nah jika kalian menginginkan tutorial Membuat Scrollbar Persentase pada Scroll Blog anda bisa melihatnya dibawah berikut ini .

• Login di Blogger.com
• Masuk ke Dashboard > Template > Edit HTML
• Kemudian tekan CTRL + F secara bersamaan .
• Cari kode "]]></b:skin>"
• jika sudah menemukan copy kode dibawah ini kemudian taruh diatas kode tersebut .

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #555;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 8px solid transparent;
  border-color:#555 transparent transparent #555;
}

• Kemudian cari kode </head> , jika sudah menemukan taruh kode dibawah ini dibawah kode </head>

 <div id='scroll'></div>

• Jika kalian sudah memasang kode jQuery terbaru maka tidak usah memasang lagi, nah jika kalian belum memasang kode jQuery terbaru anda bisa melihatnya dibawah ini .

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

• Taruh kode diatas di atas kode </head> .
• Kemudian cari kode </body>, jika sudah pasang javascript dibawah ini tepat diatas 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>

• Jika sudah kalian klik Simpan Template pada template kalian .

Nah itulah Cara Membuat Scrollbar Persentase pada Scroll Blog dan semoga postingan ini bisa bermanfaat dan juga bisa menambah keren pada tampilan template kalian , demikianlah postingan tentang Membuat Scrollbar Persentase pada Scroll Blog dan semoga bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.