Spider Blogging - The Ultimate Blogging Solution

Home
Blogger

How to Add Reading Progress bar in blogger | Spider Blogging

How to Add responsive Reading Progress bar in blogger | Spider Blogging

Hello Bloggers Today  I came up with the great design technique to grab user's attention to page's UX Design, Yes Today  am going to teach how to add Reading Position Indicator (RPI) , You can easily install it on wordpress by installing Reading Position Indicator Plugin, But you all know we cannot add plugins in blogger , But thorough some CSS and HTML you can install it easily.


I've seen quite a few web pages that have some kind of an indicator to display the current reading position. Normally, such a Reading Position Indicators are used on blog posts or long-form articles and help users to understand how far they are from finishing the reading but you may also find it Chrome's android application in the form loading bar (and Apple's browser Safari, a very similar looking loading bar)



In this post we will see How to install Reading Progress Bar in Blogger , So Read post carefully and follow all steps neatly so that you won't face 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>

     4. Add the code  just below the  <body> tag 

<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
  </div>

     5. 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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
</script>
   6. Now the Click on Save theme.

That's it guys If you have correctly followed my steps you will see the result when you open your site.


You can see the DEMO here 


So that's all in this post, I hope you found it useful, If you face any issue while installing please comment below.