Home
Blogger Tutorials

How to Add a Scroll Progress Bar Below Header in Blogger (Cloud UI & All Themes)

Techno Praveen

In this tutorial, you will learn how to add a smooth and stylish scrolling progress bar below the header in your Blogger template. This enhancement gives your blog a modern, dynamic look and works perfectly with Plus UI, Median UI, Fletro Pro, iMagz, and other professional Blogger themes.

Scrollbar Under Blogger Header

Scrollbar Below the Header

The scroll progress bar adds a clean, animated line at the top of your page that fills as the user scrolls. This small upgrade helps improve user experience and gives your layout a more professional appearance. The feature is powered entirely by CSS and JavaScript and can be applied to any Blogger theme with ease.

How to Install the Scroll Progress Bar

Follow the steps below to add the scroll progress bar to your Blogger template:

  1. Go to your Blogger Dashboard.
  2. Open Theme → Edit HTML.
  3. Search for the tag </header> and paste the following code directly above it:
<div class="addons section" id="progress-bar">
  <div class="widget HTML" data-version="2" id="HTML24">
    <div class="pRs">
      <div class="pBar pSt pAn" id="Progress-bar"></div>
    </div>
  </div>
</div>

Next, you need to add the CSS responsible for the styling, height, and color of the progress bar.

  • Search again for ]]></b:skin> and paste the following code directly above it:
.pRs {
  border: 1px solid var(--darkBa);
  background: var(--darkBs);
}
.pRs {
  border: .1px solid var(--contentL);
  top: 0;
  left: 0;
  z-index: 999;
  height: 6px;
  display: flex;
  background: #e9ecef;
}
.pBar {
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: .25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: width .6s ease;
}
.pSt {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 50px 50px;
}
.drK .bar { background: var(--darkU); }

Finally, add the JavaScript that updates the bar width while scrolling.

  • Search for </body> and paste the following code directly above it:
<script type="text/javascript">
// <![CDATA[
window.addEventListener("scroll", function () {
  var s = window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  var body = document.body;
  var html = document.documentElement;

  var d = Math.max(body.scrollHeight, body.offsetHeight,
                   html.clientHeight, html.scrollHeight, html.offsetHeight);

  var c = window.innerHeight;

  var position = (s / (d - c)) * 100;

  document.getElementById("Progress-bar")
    .setAttribute("style", "width:" + position + "%");
});
// ]]>
</script>

That’s it! You now have a clean, animated scroll progress bar working below your blog header in Plus UI, Median UI, Fletro Pro, iMagz, and similar templates. If you encounter any issues, feel free to reach out or leave a comment below.

Done!
This concludes our guide on “How to Add a Scroll Progress Bar Below the Blogger Header.” See you again in a new tutorial — stay safe! 🙂

Post a Comment