UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Add Percentage Bar In Scrollbars To Blogger Blog

Installing Percentage In scrollbars - Postings further provided for setting up the percentage of the scrollbar functionality blog,maybe you've seen this percentage function on other blogs.

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. By adding this percentage not only as decoration but merely blog visitors will be able to see what percentage of pages that She scroll, if it has reached the bottom of the page then the percentage would be 100%. Was fairly easy way of application, please follow the following simple steps,

Instructions To Follow:

1. Go to Blogger Dashboard,Select Your Blog
2. Click TEMPLATE tab now click on EDIT TEMPLATE
3. Find ]]></b:skin> or </Style> and paste below code before it.

CSS Code:

#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: solid 6px transparent;
  border-left-color: # 369fcf;
}

Now,Save template,After this again search for </head>,now insert below code 

HTML Code:

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

Now save template and search again for </body>

JQuery Code:

<Script type = 'text / javascript'>
// <! [CDATA [
scrollTimer var = null;
$ (Window) .scroll (function () {
   viewportHeight var = $ (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>

You have successfully done your widget.Now,click on VIEW blog to see awesomness.

DEMO, LIVE IT HERE:

See the Pen Persentase Pada Scrollbar by Abdullah Malik (@UrduBloggingHub) on CodePen.

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)