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.
Persentase

_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.

Previous
Next Post »

11 komentar

Click here for komentar
Fajar
admin
6 April 2015 pukul 19.01 ×

nice post gan. saya kira trik ini gk ada gunanya. eh pas saya coba blog saya tmbah keren tuh :)

Reply
avatar
Fajar
admin
6 April 2015 pukul 19.01 ×

nice post gan. saya kira trik ini gk ada gunanya. eh pas saya coba blog saya tmbah keren tuh :)

Reply
avatar
7 April 2015 pukul 13.44 ×

iyah gan, :) hmmm smga tambah keren dan yg pastinya jadi SEO y blog nyh, :)
terima kasih dah mampir, :)

Reply
avatar
7 April 2015 pukul 14.09 ×

iyah gan, smga bemanfaat y, :)

Reply
avatar
Unknown
admin
9 April 2015 pukul 08.53 ×

Nice post, buat hiasan di blog biar tambah keren ya.. :)

Reply
avatar
AC10 Hacks
admin
9 April 2015 pukul 15.43 ×

Keren sob, ijin coba..

Reply
avatar
18 April 2015 pukul 09.01 ×

monggo gan, smga tmbh keren blognya y, :)

Reply
avatar
18 April 2015 pukul 09.03 ×

monggo gan, smga bermanfaat y, :)

Reply
avatar
25 April 2015 pukul 08.15 ×

okeh gan, siip dah smga bermanfaat y, :)

Reply
avatar
1 Mei 2015 pukul 06.04 ×

Keren nih gan kalo ditambahin di blog :D
Nice tutor

Reply
avatar

*Berkomentarlah Sesuai Topik, dan Sopan Santun.
*Jangan Lupa Untuk Follow Blog, 100 % Follow Back, :)
ConversionConversion EmoticonEmoticon