How to Add Percentage Value to a Scrollbar in Bloggers.

Advertisements
In the past, we have already shown you a way through which you can customize your Scrollbar using Web toolkit. Recently, one of our users asked us how to add percentage value to a Scrollbar in Blogger? 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.

Note: You can check out the demo of this widget Here (Tip: Make sure you scroll up or down the page to see the percentage along the scrollbar). 

The First thing you need to do is to login into your Google account making sure that your blogs are hosted on that particular account. Now go to Blogger Dashboard and select the blog in which you would like to add Percentage Value to a Scrollbar. Go to Template >> Edit HTML and search for the ]]></b:skin> tag. Once you have found the ]]></b:skin> tag successfully, just above it paste the following CSS code.

#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;
}

After adding the CSS coding, search for the ending </head> tag and right after it paste the following code. (Tip: Make sure you paste the code between the ending </head> and opening <body> head tag.

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

Lastly, search for the ending </body> tag and just above it paste the following JavaScript code. This is the code which will ensure that your scrollbar shows the accurate percentage upon scrolling up or down the page. Once everything is done, save the template by pressing “Save Template” Button available on the top right corner of your screen.

<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>

Congratulations: You have successfully added percentage value to a scroll bar in bloggers. Now go and check our blog to see the widget in action.

We hope this tutorial have helped to learn How to Add Percentage Value to a Scrollbar in Bloggers. Let us know if you have any suggestions by commenting them below. If anyone want quick help or support just messages us on our Facebook Fan Page.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

3 comments

August 24, 2013 at 7:54 AM

Your every widget is really awesome; you are actually doing a great job without much fanfare; God bless Faizan and his team

October 17, 2014 at 2:42 PM

Great!

March 4, 2016 at 12:57 PM

Wonderful tutorial, i like it so much.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.