Buat Tampilan Persentase Scrollbar di Blog

PayuBaco

Persentase Scroolbar ialah widget yang berguna untuk memberitahukan pengunjung berapa panjang artikel atau seberapa tinggi artikel yang saat ini sedang ia baca yang ditampilkan dalam bentuk persentase, selain berguna untuk memberikan informasi kepada pembaca terkadang hal ini juga biasa digunakan untuk mempercantik blog penulis. Jadi supaya sobat tidak penasaran maka saya akan membagikan tutorialnya.

Tutorial Membuat Tampilan Persentase Scrollbar di Blog

1. Silahkan sobat membuka Dashboard Blog => Tema => Edit HTML. 
2. Kemudian letakkan kode CSS dibawah ini tepat diatas ]]></b:skin> atau </style>. 
#PersenScroll {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background:linear-gradient(135deg,#437ff4,#0de9dc);color:#FFF;border-radius:3px}
#PersenScroll:after {background: linear-gradient(135deg,#437ff4,#0de9dc);position: absolute;top: 4px;right: -8px;height: 24px;width: 6px;margin-top: -4px;content: "";border-radius: 2px;}
3. Lalu masukkan kode HTML berikut tepat diatas </body>. 
<div id='PersenScroll'></div>
4. Jangan lupa juga masukkan kode JS berikut diatas </body>. 
<script type='text/javascript'>
/*<![CDATA[*/

$(window).scroll(function() {
var scrollTimer = null;

var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),

distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#PersenScroll').height() / 2;
$('#PersenScroll')
.css('top', distance)
.text('(' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}

</script>
scrollTimer = setTimeout(function() {
$('#PersenScroll').fadeOut();
}, 1500);
});

/*]]>*/
5. PASTIKAN!! kamu sudah memasang Jquery, Jikas belum silahkan masukkan kode dibawah ini tepat diatas </head>. Jika sudah terpasang jangan dipasang ulang. 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
6. Terakhir silahkan simpan tema blog sobat. Dan selesai hasil bisa lihat dibawah ini.
Result 
Oke sampai disini dulu tutorial kali ini, terima kasih kepada sobat online yang telah berkunjung ke blog ini. Jika teman ada saran, masukan, atau pertanyaan silahkan sobat tinggalkan di kolom komentar. Terima kasih dan sampai jumpa di artikel berikutnya.