Cara Membuat Persentase Pada Scrollbar Blog

Memasang persentase pada scrollbar blog memang bukan merupakan hal yang wajib, tetapi perlu kamu coba, pemasangan persentase pada blog fungsinya bukan hanya untuk mempercantik blogspot saja tetapi juga memberikan kesan yang berbeda kepada pengunjung blog, dan bukan hanya itu membuat persentase pada scrollbar blog juga bisa difungsikan untuk menunjukan keberadaan pada saat di scroll apabila sudah sampai bawah maka nilai persentase akan menjadi 100%.

Pemasangan persentasi ini cocok pada blog yang memiliki artikel yang banyak, karena persentase ini bisa menunjukan seberapa persen ia scoll kebawah, dan untuk yang paling atas 0% dan paling bawah 100% jadi ketika ada pada tengan scroll akan menjadi 50% dan bawah menjadi 100% dan atas menjadi 0%.

Untuk kalian yang berminat memasang persentase pada scrollbar blog ini silahkan ikuti langkah-langkah dibawah ini.

Cara Membuat Persentase Pada Scrollbar Blog
1. Masuk ke Theme/Tema > Edit HTML
2. Cari Kode ]]></b:skin> atau </style>
3. Taruh kode css dibawah ini, letakan di atas kode ]]></b:skin> atau </style>

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

4. Selanjutnya simpan kode dibawah ini di bawah kode </head>

<div id='scroll'/>

5. Terakhir salin kode ini, simpan di atas 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>

6. Klik save atau simpan

Itulah Cara Pemasangan Persentase Pada Scrollba Blog, sangat mudah bukan ? tentunya.