AllBlogTools.com | Blogger Templates and Tricks

Link to Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com

Percentage Scroll Bar Widget For Blogger

Posted: 07 Aug 2013 01:53 AM PDT

This image has no 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.

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

//<![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!

786 Jumbo Articles

Watch All Pakistani and Indian Dramas

Wednesday, August 7, 2013

AllBlogTools.com | Blogger Templates and Tricks

AllBlogTools.com | Blogger Templates and Tricks

No comments:

Post a Comment