How To Add Percentage In Blogger Blog Scrollbar

Installing Percentage In Blogger Scrollbar - How to attach a percentage on the scrollbar in blog . May be you 've seen this percentage function in another blog .

The actual percentage of the scrollbar is not an important feature for a blog . But it never hurts to try , even then depending on individual taste .



You Can Check Demo On Our Own Website

Demo

By adding this percentage not only as decoration but merely blog visitors will be able to see what percentage of pages that He scroll , if it has reached the bottom of the page then the value percentage will be 100 % .

The way to add the application is quite easy , just follow the simple steps below :


First , paste  the following code just above ]]></b:skin>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Next, paste the following code below </head> 

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

Now just paste the following code just above the </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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

 Then save the template and see the results .