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 involves a widg...



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!



COMMENTS

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

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

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

Name

blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
ltr
item
SharedTutor Tutorials For Everyone: Percentage Scroll Bar Widget For Blogger
Percentage Scroll Bar Widget For Blogger
http://www.euskocake.com/images/Redes_Sociales_Tartas_Decoradas_Donostia_Guipuzcoa/blogger_logo.jpg
SharedTutor Tutorials For Everyone
http://www.sharedtutor.com/2013/08/percentage-scroll-bar-widget-for-blogger.html
http://www.sharedtutor.com/
http://www.sharedtutor.com/
http://www.sharedtutor.com/2013/08/percentage-scroll-bar-widget-for-blogger.html
true
1970043136941886328
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy