Percentage Scroll Bar Widget For Blogger

In today’s featured tutorial, you’ re going to learn a neat new trick that will add a nice little trinket for your blog. It inv olves a widget that lets your visitor know just how far down the page he or she is viewing y our site by means of a tool tip. This tool tip will contain percentage number that shows the visitor how close they are at th e bottom of the page as they move (or scroll) up and down the page.
The tutorial is originally shared by Blogger user Mack See.
Putting this cool little widget on to your Blogger is simple:
1. Log in to your Blogger dashboard.
2. Go to Template.
3. Click on Edit HTML.
4. Using Ctrl+F, look for ]]></b:skin>.
5. Copy and paste following code below right under 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;
}

6. Next, while still in the Edit HTML window, using Ctrl+F again, look for </head>.
7. Copy and then paste the following code below immediately after it.

<div id=’scroll’ ></div>

8. Last one, search for </body> and copy and paste the following code below right before it.

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

9. Save your template and you’re done! Enjoy your new widget!