AABI‍TALITA BLOG
7.22.2013

Membuat Persentase Scrollbar Pada Blog


Persentase scrollbar ini keberadaan dan fungsinya tidak begitu penting,hanya saja selain untuk menambah pernak pernik tampilan blog juga akan memudahkan pengunjung untuk mengetahui sudah berapa persenkah halaman yang discroll. Saat halaman yang di scroll sudah sampai kebawah maka akan ditunjukan dengan inidaktor angka 100%.

Untuk langkah pebuatannya kurang lebih seperti berikut ini :

1. Pada edit HTML masukan kode berikut dibawah kide ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #009632;
  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: #009632;
}

Silahkan sobat sesuaikan warna backgrounnya dengan mengganti kode berwarna merah.untuk kode warna bisa dilihat disini

2. Selanjutnya  letakan kode berikut dibawah kode </head>

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

3.Kemudian letakan juga kode berikut 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>

4. Terakhir simpan template,sekarang blog sobat sudah terpasang persentase scrollbar.

Demikian semoga bermanfaat.

7 komentar

mau pasang tapi mamang belum paham... izin nyimax dulu ya

masih belum faham neh mas

Mantabz... thanks masbro... saya juga mau ralat nih mas bro.. fungsi scrollbar sangat penting karena tanpa scrollbar kita akan kesulitan melihat tampilan yang tidak muat di screen komputer atau tulisan yang berada dibawah...

http://monozcore.blogspot.com

ia betul masbro terima kasih sudah menambahkan...

boleh di coba nih ...
sip gan ..

http://hamahara.blogspot.com/

Gan kok fungsi scrollnya tidak bisa ya di blog sya? padahal saya udah ikuti petunjuk

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.