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 **/
#BloggerSpiceScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
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){

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'>
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;
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
    if (scrollTimer !== null) {
    scrollTimer = setTimeout(function() {
    }, 1500);

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. 
Add stylish percentage value in Blogger Scrollbar
4 Stars stars - "Add stylish percentage value in Blogger Scrollbar " Previously I have shared with you that how to add webkit override effect on blogger scroll bar...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *