How to Make a Percentage Scrollbar on Blogger

How to Make a Percentage Scrollbar on Blogger

What is the Percentage Scrollbar?

Percentage Scrollbar is a feature that is able to calculate the extent to which your blog is tracked by visitors, so when someone scrolls down your post or website then next to your scrollbar there will be a percentage counter.

By installing the percentage of scrollbar web or blog we will look more complete and interesting, and for installing the scrollbar percentage is not too complicated, now for those of you who are curious about how to make the Percentage Scrollbar you can read and apply the tutorial in this website, for DEMO of the percentage I'll make the scrollbar at the end of the post.

Let's just go to the tutorial to make Percentage Scrollbar

How to Make Scrollbar Percentages
  1. As always login to Blogger,
  2. On the dashboard Blogger, Select Theme ➟  Edit HTML,
  3. Then find this code ]]></b:skin> or </style>, if you have found copy the css code below and place it directly above the code mentioned earlier,
    /* Persentase Scrollbar */
    #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
    #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
  4. After placing the code, find the code again <body> and copy the code below and place it directly above the code <body>,
    <div id='scrollPersentase'/>
  5. Still not finished, then you look for the code again </body>, and place the javascript code below right above the code,
    <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 - $('#scrollPersentase').height() / 2;
    $('#scrollPersentase')
    .css('top', distance)
    .text(' (' + Math.round(progress * 100) + '%)')
    .fadeIn(100);
    if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
    $('#scrollPersentase').fadeOut();
    }, 1500);
    });
    /*]]>*/
    </script>
  6. Finally save theme.
If you want to change background color of Percentage Scrollbar -> Goto -> Color Palettes (choose desired color), Replace #ff69b4 in the css section.

Demo

That's all the blogger tutorials on how to make Percentage Scrollbar, and i hope the Percentage Scrollbar that I shared are interesting to you & Hopefully useful.

About the Author

“Hustle in silence and let your success make the noise.”

Post a Comment

Check the "Notify me" box to get an email notification if someone replies to a comment.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.