How to Add Reading Progress Bar in Blogger
Hello Blogger User, Welcome to ItsThemeWorld. Today we will learn How to Add Reading Progress Bar in Blogger. This is just a simple process, you don't have to do much, just add some codes to your theme.
Reading Progress Bar on the website gives an idea about the length of the article. Reading Progress Bar feature gives readers an indication of how far along they have read a blog post or page article.
In this post we will see How to install Reading Progress Bar in Blogger , So Read the post carefully and follow all steps neatly so that you won't face any errors.
Guideline:
- Go to Blogger Dashboard
- Go to themes Section
- Click on Edit HTML
- 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>
Add the code just below the <body> tag
<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div>
- 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>
- Now the Click on Save theme.
So that's all in this post, I hope you found it useful, If you face any issue while installing please comment below.