In addition, by installing this ScrollBar Percentage, you can also enhance your website's appearance, so that visitors are more comfortable when visiting your website.
Well, on this occasion the author will give a short tutorial on How to Easily Create ScrollBar Percentages on Blogger. If you are interested in making it, you can see in the following tutorial.
How to Make ScrollBar Percentages on Blogger
1. Log in to your Blogger account → Themes → Edit html.
2. Copy the below code and paste the CSS Style code before the code ]]> </ b: skin> or </style>
3. Enter the caller code markup given below before the <body> code
<style type='text/css'>
/* MeeranBlog24x7 Percentage Scrollbar */
#MB24x7scrollPercentage {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#MB24x7scrollPercentage:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
</style>
<div id='MB24x7scrollPercentage'/>
<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 - $('#MB24x7scrollPercentage').height() / 2;
$('#MB24x7scrollPercentage')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#MB24x7scrollPercentage').fadeOut();
}, 1500);
});
/*]]>*/
</script>That's all the Easy Ways to Make a ScrollBar Percentage on Blogger that the author has shared with you. If you have questions about this article, don't hesitate to comment below. May be useful.