How to add reading progress bar in blogger (2023)

How to add reading progress bar in blogger website? 

Why reading progress bar on website is important? 

A reading progress bar on a website is important. It helps users understand the length of a post and grabs attention. It also attracts user interaction and reduces bounce rate. Nowadays, users prefer to scroll and scan articles. They have low attention spans and don't want to read long blog posts. Adding a reading progress bar helps readers understand the content better and encourages them to read for longer. This ultimately boosts AdSense revenue.

 

How to add reading progress bar in blogger (2023) 

The easiest way to add reading progress bar is given down below:

Open themes and click on edit html now copy the code below and paste it above the

</body> tag . 

HTML

 <style>

#site-navigation{margin-top:10px!important;}

.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}

.K2progress {width: 100%;height: 7px;  z-index: 1111;background: #ccc;}

.progress-bar {height: 7px;background-color:tomato;width: 0%;}

</style>

<div class='reading-meter'><div class='K2progress'><div class='progress-bar' id='myBar'/></div>  </div>

<script> 

window.onscroll = function() {myFunction()};

function myFunction() {

  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  var scrolled = (winScroll / height) * 100;

  document.getElementById("myBar").style.width = scrolled + "%";

}

</script>