Cara Buat dan Pasang Tampilan Persentase ScrollBar di Blogger - Mediaachmad

Cara buat dan pasang tampilan Persentase ScrollBar di Blogger. Persentase ScrollBar merupakan sebuah widget yang berfungsi untuk memberitahukan ke pengunjung panjang atau tinggi dari halaman website dengan tampilan Persentase.

Fitur ini kebanyakan hanya di terapkan di beberapa blog saja, jadi tidak terlalu banyak pengguna yang memasang widget ini. Kebanyakan mereka gunakan untuk mempercantik tampilan website saja. Kali ini mediaachmad akan memberikan tutorial bagaimana cara buat dan pasang widget tampilan Persentase ScrollBar di Blogger.

Cara buat dan pasang tampilan Persentase ScrollBar di Blogger

Pertama kalian login ke Blogger – masuk ke TEMA – klik EDIT HTML. Jika sudah silakan letakkan kode CSS diberikut di ATAS kode ]]></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;}

Kedua masukan kode HTML berikut ini di atas kode </body>.

<div id='PersenScroll'></div>

Ketiga silakan kalian masukkan kode JS berikut ini 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 - $('#PersenScroll').height() / 2;
$('#PersenScroll')
.css('top', distance)
.text('(' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#PersenScroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

Pastikan!! kalian sudah memasang Jquery, jika belum silakan masukan kode berikut di atas </head>. jika sudah terpasang silakan tidak udah pasang lagi

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Keempat Simpan Tema, selesai dan lihat hasilnya.

Mungkin itu yang dapat mediaachmad sampaikan tentang Cara buat dan pasang tampilan Persentase ScrollBar di Blogger, semoga dapat bermanfaat sekian dan terima kasih.