Add stylish percentage value in Blogger Scrollbar

Add stylish percentage value in Blogger scrollbar with fading effect
scroll bar effect

Previously I have shared with you that how to add webkit override effect on blogger scroll bar. Today I am going to share with you that how we can add an stylish progress by percentage value in blogger scrollbar. This widget is very attractive and effective for those who wants to know about the scroll percentage.

In this widget I have calculated the total page as 100% and added value which will change after scrolling. When you will be at the top of blogger template then the value will show 0% and when you scroll down then it will display the percentage value of scrolling. I think this trick is pretty much cool. This widget made with pure CSS. Black and Royal blue percentage holder with fading effect.


So to install this please flow the below steps-

Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing    Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

/** stylish percentage value by www.bloggerspice.com **/
#BloggerSpiceScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#000000;
color: #fff;
border-radius: 3px;
}
#BloggerSpiceScroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0x;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(4, 189, 250);
}
@media screen and (max-width:600px){
#BloggerSpiceScroll{
display:none;
}

Step 5 Now find <body> by Pressing    Ctrl + F

Step 6 And Paste the below code after <body> 

<div id='BloggerSpiceScroll'/>

Step 7 Now find </body> by Pressing    Ctrl + F

Step 8 And Paste the below code above/before </body> 

<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 - $('#BloggerSpiceScroll').height() / 2;
    $('#BloggerSpiceScroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#BloggerSpiceScroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Step 9 Now hit the save button

That's it. Check your blogger to see the effects. If you have any query then feel free to contact with me. 
Go Up