How to Add Reading Progress Bar in Blogger in HTML code next

 Users abandon long posts. Progress bar = 18% more scrolls to bottom = more AdSense ads seen.

In this tutorial, you'll add a reading progress bar to Blogger posts. Follow along and you'll increase time on page + user engagement in 2025.

Step 1: Why Reading Progress Bar Works 2025

Visual feedback keeps users scrolling instead of bouncing.

1. Psychology: Humans like completing things. Bar shows "almost done"
2. Engagement: Users scroll 23% further with progress bar vs without
3. AdSense RPM: More scroll = more in-content ads loaded = higher earnings
4. Mobile UX: Users know how long the post is on small screens

Image: Medium.com reading progress bar at top of screen

Step 2: Add Reading Progress Bar to Blogger Theme

Works on all Blogger themes. Shows only on post pages.

1. Blogger → Theme → Edit HTML → Ctrl+F → Search </head>
2. Paste this code ABOVE </head>:

<style>
/* Reading Progress Bar */
.progress-container {
position: fixed; top: 0; left: 0; width: 100%; 
height: 4px; background: transparent; z-index: 99999;
}
.progress-bar {
height: 4px; background: #1a73e8; width: 0%; 
transition: width 0.1s ease;
}
body.dark-mode .progress-bar {background: #4da6ff;}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>

<script>
//<![CDATA[
window.onscroll = function() {updateProgress()};
function updateProgress() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progressBar").style.width = scrolled + "%";
}
//]]>
</script>
</b:if>

Step 3: Customize Progress Bar Color + Position

Match your brand colors. Change position if you have sticky header.

Change	Code to Edit	Example
Bar color	background: #1a73e8;	Red: #ea4335, Green: #34a853
Bar height	height: 4px;	Thicker: 6px, Thinner: 2px
Position	top: 0;	Below header: top: 60px;
Show on homepage	Delete <b:if cond='data:blog.pageType == "item"'>	Bar shows on all pages

Step 4: Advanced: Circular Progress Bar in Sidebar

Alternative style. Shows percentage in corner.

1. Layout → Add Gadget → HTML/JavaScript → Sidebar section
2. Paste this code:

<style>
.circle-progress {
position: fixed; bottom: 20px; right: 20px;
width: 60px; height: 60px; z-index: 9999;
}
.circle-bg {fill: none; stroke: #e0e0e0; stroke-width: 4;}
.circle {fill: none; stroke: #1a73e8; stroke-width: 4;
stroke-linecap: round; transition: stroke-dashoffset 0.1s;}
.percent-text {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%); font-size: 12px; font-weight: bold;
}
</style>

<div class="circle-progress">
<svg width="60" height="60">
<circle class="circle-bg" cx="30" cy="30" r="26"></circle>
<circle class="circle" id="circleBar" cx="30" cy="30" r="26"></circle>
</svg>
<div class="percent-text" id="percentText">0%</div>
</div>

<script>
var circle = document.getElementById('circleBar');
var radius = circle.r.baseVal.value;
var circumference = 2 * Math.PI * radius;
circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference;

window.addEventListener('scroll', function() {
var winScroll = window.pageYOffset;
var height = document.documentElement.scrollHeight - window.innerHeight;
var scrolled = (winScroll / height);
var offset = circumference - (scrolled * circumference);
circle.style.strokeDashoffset = offset;
document.getElementById('percentText').innerText = Math.round(scrolled * 100) + '%';
});
</script>

Step 5: Test Progress Bar + Performance Check

1. Test 1: Open post → Scroll down → Bar fills from 0% to 100%
2. Test 2: Mobile view → Bar must stay at top, not overlap header
3. Test 3: Scroll to bottom → Bar hits 100% exactly at end of post
4. Test 4: PageSpeed Insights → Script must not cause INP issues
5. Fix: Bar not moving = Conflict with other JS. Place code before </body> instead

Bad practice to avoid: Adding 10px thick neon bar. Distracts users. Keep it 3-5px and subtle color.

Important: Progress bar only helps if content is good. Thin content + bar = users see 10% and leave. Best for 1500+ word guides. Combine with Table of Contents from Post #45 for max engagement. Track scroll depth in Analytics to see improvement.