Cara Memasang Persentase Pada Scrollbar

Dengan menambahkan trik ini bukan hanya sebagai hiasan blog semata tetapi pengunjung bisa melihat berapa persenkah halaman yang telah discroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100% dan ketika kita menariknya lagi keatas akan menjadi 0%, demikian juga sebaliknya. Jika sobat berminat untuk melakukan cara ini, itung-itung trik ini buat menghias blog agar menarik, dan apabila belum tau, contohnya seperti diblog saya ini, jadi silakkan ikuti step –by-stepnya.

_Masuk ke  Blogger >> Pada Dasbor >> Pilih Template >> Edit HTML.

_Sekarang cari kode ]]></b:skin> , dan  Copas kode di bawah tepat di atas kode ]]></b:skin>.

#scroll {

  display:none;

  position:fixed;

  top:0;

  right:15px;

  z-index:500;

  padding:3px 8px;

  background-color:#369fcf;

  color:#fff;

  border-radius:3px;

  font-size:14px; 

}

#scroll:after {

  content: " ";

  position: absolute;

  top:50%;

  right:-10px;

  height:0;

  width:0;

  margin-top:-6px;

  border:6px solid transparent;

  border-left-color:#369fcf;

}

_Selanjutnya, simpan kode pemanggilnya di bawah </head>.

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

_Simpan kode di bawah ini tepat 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(600);

    if (scrollTimer !== null) {

        clearTimeout(scrollTimer);

    }

    scrollTimer = setTimeout(function() {

        $('#scroll').fadeOut(600);

    }, 1000);

});

//]]>

</script>

 _Kemudian simpan Template dan lihat hasilnya.

Jika sobat melakukanya dengan benar, maka persentase tsb sudah ada di samping scrollbar.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email