Jul 25, 2016

Scrollbar Percentage Value Function! Add to Blogger

How To Add Scrollbar Percentage Value Function to Blogger?
We have already posted about How To Customize the Color of Scrollbar in Blogger and now in this post we are going to post another tutorial about customizing the scrollbar in blogger. Today in this post we are going to share How to Show or Add Percentage Value Function in Blogger?

How To Add Scrollbar Percentage Value to Blogger?

Actually, It basically shows you the percentage of a page while scrolling. It might turn out to be extremely useful for your visitors to find out how much page they have scrolled, or how much content is left to be read. In this article, we will show you How to Add Percentage Value to a Scrollbar in Bloggers.

See Also Another Stylish Widget

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.

If you want to see live demo of this function then you can see it live by clicking on the below button.

We hope you liked it and now you want to add it on your blogger blog. If you want to add it on your blogger then read below instructions carefully and do all steps step wise.

Note: Before doing any customize inside your Blogger Template code, Must download a backup copy of your Template.

How To Show/Add Scrollbar Percentage Value Function in Blogger?

  • Go to Blogger >> Template >> Edit HTML.
  • Now search for ]]></b:skin> tag and paste below code just above of it.
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
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: #2187e7;
  •  Now search for </head> tag and paste following code just after of this tag.
Note: Make sure you paste the code between </head> and <body> tag.

<div id='scroll'></div>
  •  Now, Finally search for ending </body> tag and paste following JavaScript code just above of this tag. This is the code which show accurate percentage value of your blog page when someone scroll to top or scroll to down.

    <script type='text/javascript'>
    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;
    .css('top', distance)
    .text(' (' + Math.round(progress * 100) + '%)')
    if (scrollTimer !== null) {
    scrollTimer = setTimeout(function() {
    }, 1500);
  • Now, simply click on save template.
  • Congrats! You have added this function to your blogger blog successfully.


So above guide is about How To Add/Show Scrollbar Percentage Value Function in Blogger Blog? We hope by above guide you can successfully added to your blogger template. If anyhow problem persist after following all steps then drop a comment below. We will help you out of sure. Do share.
Thank You! Stay Blessed!


We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.