Download this Safelink Theme. Download now!

Souq Store

Welcome Guys !

Your Site Name: Provides You High Quality Content For Free.

Home
Widget

How To Add Article Reading Progress Bar In 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.
Read Also :

Post a Comment