Home » Blogger Tutorials, Tricks and Hacks » Percentage Scroll Bar Widget For Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Percentage Scroll Bar Widget For Blogger

Percentage Scroll Bar Widget For Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

729 views

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 involves a widget that lets your visitor know just how far down the page he or she is viewing your site by means of a tool tip. This tool tip will contain percentage number that shows the visitor how close they are at the 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!

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here