How To Show Scrolling Percent In Your Blogger

Views:

Hi. Now I share a new information to add scrolling percent in blogger. It is very simple, This may help your customers to know how much scroll down to bottom and top. This is mainly used in experimental and professional sites. This technique only working with Blogger. You can add This feature with your blog with out any effort. Jus you think about this information. Its script crated with HTML and JavaScript. If you want to add this scroll percent to your blogger. Just follow below instructions. and keep follow. If you have any problem with this information. Just contact admin…

How to show Scrolling Percent In your Blogger (Internet Explora)

Go to Dashboard.

Click on Template option.

Click on Edit HTML.

Find (CTRL + F) ]]></b:skin> tag from Template.

Copy and paste below code just above ]]></b:skin>

<style>
    #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;
    }
</style>
 

Then Find (Ctrl+F) </head> tag.

Copy and paste below code just before </head> tag.

<div id='scroll'></div>

Now, again find (Ctrl+F) for </body> tag.

Copy and paste below code just above </body> tag.

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