Cara Membuat Persentase pada Scrollbar blog

Selamat malam sahabat blogger semua !!! Kali ini, aq akan berbagi tutorial tentang Cara Membuat Persentase pada Scrollbar.

Dengan menambahkan persentase scrollbar, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%. ( Penambahan scroll ini insyaallah tidak akan membuat loading blog menjadi berat. )

Tutorial Cara Membuat Persentase pada Scrollbar blog :

1. Masuk ke Template dan Edit HTML. dan Simpan kode ini di atas ]]></b:skin> :

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

2. Simpan kode ini di bawah </head> :

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

3. Simpan JavaScript ini di atas </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>

4. Simpan Template.

Sekarang, coba lihat pada blog sobat. :)

Sekian dulu ya tips dariku, semoga bermanfaat... :)

Ditulis Oleh : Unknown ~ Tips and Trick, Download, Widget and Gadget, and Other Article

Sobat sedang membaca artikel tentang Cara Membuat Persentase pada Scrollbar blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima kasih. <a href="http://fahrurrozi18.blogspot.com/2013/09/cara-membuat-persentase-pada-scrollbar.html" target="_blank">Cara Membuat Persentase pada Scrollbar blog</a>

:: Get this widget ! ::

Artikel terkait :