Cara Membuat Persentase Scroolbar di Blogger

Cara Membuat Persentase Scroolbar di Blogger

Oleh ahmiw
Pada Rabu, Juni 10, 2020
Cara Membuat Persentase Scroolbar di Blogger
AmbyarBlog - Pada kesempatan kali ini saya akan berbagi tutorial Membuat Persentase Scrollbar di blog. Presentase Scrollbar merupakan fitur menarik yang menghitung berapa persen sobat melakukan scroll kebawah.

Dengan memasang scroolbar ini membuat blog sobat menjadi keren dan menarik, terkadang para blogger ingin mempunyai blog yang menarik dan keren. Itu sudah menjadi ciri khas kita untuk menarik para pengunjung, oleh sebab itu sobat bisa coba tutorial ini untuk membuat blog menjadi lebih menarik.

Oke, daripada lama-lama kita langsung saja ke tutorialnya, silahkan simak dengan baik-baik.

Cara Memasang Scrollbar di Blogger

  1. Buka dashboard blogger sobat.
  2. Pilih menu Tema > Edit HTML.
  3. Salin kode dibawah ini tepat DIATAS]]></b:skin>.
    4. /* Persentase Scrollbar AmbyarBlog */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
  4. Selanjutnya cari kode <body> dan salin kode dibawah ini tepat DIATAS kode tersebut.
    5. <div id='scrollPersentase'/>
  5. Tenang masih ada satu tahap lagi.
  6. Kemudian silahkan sobat cari kode</body> dan salin kode dibawah tempat DIATAS kode tersebut.
    7. <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 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>
  7. Terakhir Simpan.
Itulah Cara Membuat Presentase Scrollbar di Blogger yang dapat saya bagikan. Semoga bermanfaat, apabila ada pertanyaan silahkan komen di kolom komentar. Sampai jumpa, sekian dan terima kasih.

Anda mungkin menyukai postingan ini