Percentage Scroll Bar Widget For Blogger

http://videohive.net/?ref=gimmegfx



This image doesn't have any alt text

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!




Title Post: Percentage Scroll Bar Widget For Blogger
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: SharedTutor

Thank you for visiting sharedtutor.com, If there is criticism and suggestions please leave a comment


thumbnail
About The Author

Someone who always wanted to know about the beauty of the world :)

0 comments