How to Add Scroll Percentage Indicator in Blogger (Complete Tutorial) - KodeRian

Have you ever visited a blog and wondered how far you’ve scrolled down the page? That’s exactly what a scroll percentage indicator does—it shows readers the percentage of the article they have read and how much is left. This small but powerful feature not only enhances the user experience but also encourages visitors to keep reading until the end.

In this tutorial, you’ll learn how to add a scroll percentage indicator in Blogger using simple CSS and JavaScript. We’ll go step by step, explain how it works, and also cover customization options so you can style it to match your theme perfectly.

Why Add a Scroll Percentage Indicator in Blogger?

Adding a scroll progress feature might feel optional, but here’s why many modern blogs and online publications use it:

• Better user engagement: Visitors can instantly see their reading progress, which motivates them to finish the article.
• Professional look: A scroll percentage bar or indicator makes your blog look modern and interactive.
• Improved navigation: Readers know how much content is left without guessing.
• Good for long posts: Perfect for tutorials, guides, or detailed articles where scrolling can feel endless.

Now, let’s dive into the step-by-step setup for Blogger.

Step-by-Step Tutorial: Adding Scroll Percentage in Blogger

Step 1: Open Blogger Theme Editor

1. Go to your Blogger Dashboard.
2. Navigate to Theme → Edit HTML.

Step 2: Add the CSS Styling

Paste this CSS below your <style> or inside <b:skin> section:

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 15px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #369fcf;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -10px;
  height: 0;
  width: 0;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left-color: #369fcf;
}

Step 3: Add the HTML Container

Right below your </head> tag, insert this line:

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

Step 4: Add the JavaScript Code

Before the closing </body> tag, add the following JavaScript 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 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Step 5: Save Your Theme

Click Save Theme, refresh your blog, and scroll through the page. You’ll see the percentage indicator appear on the right side.

How the Code Works

Let’s break down the functionality:

• CSS: Styles the scroll percentage box, positions it, and adds a small arrow indicator.
• HTML: Creates a container <div id="scroll"> where the percentage will be displayed.
• JavaScript/jQuery: Calculates scroll progress, updates the percentage in real-time, and hides it when scrolling stops.

Customization Options

You can tweak the look and feel of your scroll percentage indicator:

• Change background color: Update background-color: #369fcf; to your brand color.
• Change font size: Adjust font-size for better visibility.
• Position: Move the indicator to the left by changing right: 15px; to left: 15px;.
• Always visible: Remove the fadeOut function if you want it always showing.

Extra Tips

1. Test on different devices: Make sure the indicator is visible on both desktop and mobile screens.
2. Minimalist design: Keep it simple; too much styling may distract readers.
3. Combine with a progress bar: For a more visual experience, you can use a horizontal scroll progress bar at the top of the page instead of (or in addition to) the percentage indicator.

Troubleshooting

The scroll percentage doesn’t appear

Check if you have jQuery loaded. Blogger templates usually include it, but if not, you’ll need to add it manually.

The percentage is stuck at 0%

Ensure that the <div id="scroll"> is placed inside the <head> or body and that your JavaScript is added before </body>.

The indicator overlaps with other widgets

Adjust the top and right values in CSS to move it where it won’t interfere with your layout.

It disappears too quickly

Increase the timeout value in the JavaScript (currently 1000 ms) to make it stay longer before fading out.

Frequently Asked Questions (FAQ)

Do I need advanced coding skills for this?

No. This tutorial only requires copy-pasting a few code snippets into your Blogger theme.

Does it affect SEO?

No. The scroll percentage indicator is purely a front-end enhancement and has no effect on search rankings.

Can I use a progress bar instead of numbers?

Yes. You can replace the text percentage with a styled progress bar by modifying the JavaScript and CSS.

Will it slow down my blog?

Not significantly. The code is lightweight and should not affect performance unless your blog is already overloaded with heavy scripts.

Conclusion

Adding a scroll percentage indicator in Blogger is an excellent way to enhance user experience. It helps readers track their progress, encourages them to finish long posts, and gives your blog a professional touch. With only a few lines of CSS and JavaScript, you can achieve this feature in minutes.

So go ahead, implement it on your blog, and watch how it improves engagement and user satisfaction.

If you found this tutorial helpful, don’t forget to bookmark this site, share it with your friends, and subscribe for more Blogger customization tips and tutorials.