How to Show Percentage Value to Scroll Bar in Blogger

Scroll bar gives attractive look to your blog or site. Showing percentage value to scroll bar in blogger will help your readers to know how long the page or post is. Which might come out useful for your readers and visitors to find out how much page have been scrolled or how much content, post or article is left to be read. This is very attractive and effective thing that you should use. Showing percentage value to scroll bar in blogger makes your blog different and gives feel good.

How to Show Percentage Value to Scroll Bar in Blogger

1. Go to blogger > Tempale > Edit HTML

2. Press CTRL + F to find this  ]]></b:skin>

3. Copy and paste below code just above code.

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #d81111;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #d8111;
}

4. Now Search For </head>

5. Add The Following Code Below </head>

<div id='scroll'></div>

6. Now Search For </body>

7. Copy and Paste The Following Code above </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>

8. Save your template and see the effect.