Cara Membuat Persentase Pada Scrollbar Di Blog

Cara Membuat Persentase Pada Scrollbar Di Blog


Pelajar Design - Pada kesempatan ini saya akan memberikan tutorial Cara Membuat Persentase Pada Scrollbar Di Blog. Memasang Persentase Scrollbar diblogger juga bisa membantu pengunjung untuk mengetahui sejauh mana mereka membaca di halaman tersebut.

Sebenarnya tutorial kali ini tidak terlalu penting, namun ada beberapa blogger yang ingin menerapkan cara ini untuk mempercantik tampilan halaman blogger mereka. Dulu saya juga sempat ingin menerapkan cara ini pada blog saya, namun pada waktu itu saya kurang atau tidak tahu sama sekali apa itu HTML, CSS dan JavaScript.

Cara Membuat Persentase Pada Scrollbar Di Blog

1. Silahkan login ke blogger.com dengan menggunakan akun Gmail kalian.
2. Masuk ke menu Tema > Edit HTML.
3. Copy dan simpan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

/* Scrollbar Persentase */
#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. Kemudian simpan kode dibawah ini tepat diatas kode <body>.

<div id='scroll'/>

5. Lalu tambahkan kode ini diatas 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. Simpan tema.

Cukup sekian artikel tentang Cara Membuat Persentase Pada Scrollbar Di Blog. Silahkan download dibawah dan jangan lupa berikan komentar template apalagi yang kalian inginkan untuk saya bahas.

Referensi : https://www.caramanual.com/2018/05/persentase-scrollbar-blogger.html

You may like these posts