How to add reading progress in Blogger complete steps
A reading progress is a bar that appears on top page post that 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.
A reading progress works 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.
Read Also: How to add beautiful download button in blogger theme
Steps 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.
- 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
If you progress bar to show on every place:
<!--[ Reading progress bar ]-->
<div class='progress-container'>
<div class='progress-bar' id='BD-Bar' style='width:0%;'/>
</div>
Use this code if you want progress bar 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
Important: 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.
