How To Add Article Reading Progress Bar In Blogger

Are you interested in adding Reading Progress Bars to your Blogger blog? Follow the below steps carefully to add Reading Progress Bars to your Blogger
Welcome Bloggers! Today, am going to instruct you on how to add Reading Position Indicator (RPI). To do so, install Reading Position Indicator plugin on your WordPress blog but Blogger does not support plugins, but you can install them using some CSS and HTML.

It's common to see an indicator on web pages that shows the reading position. Usually, Reading Position Indicators are shown on long-form articles or blog posts that help readers see how far they still have to read.


This post will show you how to add Reading Progress Bars in Blogger, so read the post carefully and follow all the steps neatly to avoid any errors.
  1. Login to Your Blogger Account
  2. Go to themes Section 
  3. Click on Edit HTML
  4. Paste the below code above </head> tag
<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#0000FF;}
</style>
       5. Now, Add below code just below the <body> tag
<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>  
</div>
       6. At the Last , Add the below code above the </body> tag
<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>
      7. Now, Click on save theme.

The result can be seen when you open your site if you followed my steps correctly. If you encounter any difficulties while installing, please comment below. I hope you found it useful.

You may like these posts

Comments

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>