Blogger

How to add Reading progress bar in Blogger

Anonymous
Last update :
Hello, friends welcome to Blogging doses. You might be seen nowadays some of the websites using reading progress bar and you might be thing how to add a reading progress bar to your Blogger website. So we made a tutorial for you about how to add a reading progress bar in Blogger.

The reading progress bar helps users to read the complete post and if your website doesn't have a scroll bar then the reading progress bar will help your visitors to know if they reached the end of the page. 

It will work when visitors scroll down on the page or post on your website it will move front. If visitors scroll up on the page or post it will move back.

Do you want to add a reading progress bar on your Blogger website? In my opinion, I will tell yes. And you might be thinking what are the reasons I already added reasons. I think you can now understand what are the reasons you want to add a reading progress bar on your Blogger website.

So now let's check how to add a reading progress bar on your Blogger website!

How to add a reading progress bar in Blogger?

Important: Before doing these steps we recommend you take a backup of your template. By chance, if any mistake is done you can restore it later.

  • First, go to your Blogger dashboard
  • Then click on Theme
  • Then click on the drop-down menu icon near Customize
  • Then click Edit HTML
Now find ]]></b:skin> and paste this CSS just above it
/* Reading progress bar CSS */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:2px;background:#6200EE;}
Then find <body> and paste this HTML code above it

To show on every place

<!--[ Reading progress bar ]-->
    <div class='progress-container'>
    <div class='progress-bar' id='BD-Bar' style='width:0%;'/>
    </div>

To show only on posts

<!--[ Reading progress bar ]-->
    <b:if cond='data:view.isPost'>
    <div class='progress-container'>
    <div class='progress-bar' id='BD-Bar' style='width:0%;'/>
    </div>
    </b:if>

Use anyone. if you want to show the reading progress bar on every place then use To Show on every place HTML code or if you want to show the reading progress bar only on posts then use To show only on posts HTML code.

Then find </body> and paste this javascript just above it
<!--[ Reading progress bar JS ]-->
<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("BD-Bar").style.width = scrolled + "%";
}
</script>
Then save HTML.

Now you successfully added the reading progress bar on your Blogger website!

Conclusion

Hope this How to add reading progress bar article will be useful to you. Do share with your friends. If you have any doubts related to this article ask me in the comment.

Thanks for visiting our site!
Edit This Article
Tags

You may like these posts

Comments