Hello friends, Welcome to our Blog we have seen many websites using the reading progress bar and you also thinking about how to add a reading progress bar to your Blogger website. So we published an article to show you how to add a reading progress bar in Blogger. So without wasting time let's check!
First of all, we would like to give some information about the Reading Progress bar.
How progress bar works?
Should you add a Reading progress bar?
How to add a reading progress bar in Blogger?
- First, go to Blogger
- Then click on the Theme option
- Then you can see a down arrow near customize click on that
- Then click on Edit HTML
- Then press CTRL+F and find ]]></b:skin>
.AC-progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.AC-progress-bar{height:5px;background:#f4a900;}
Then copy this javascript and paste below </body> close
<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("myProgress").style.width = scrolled + "%";
}
</script>
Now copy this HTML code and paste below <body> open
<div class='AC-progress-container'>
<div class='AC-progress-bar' id='myProgress' style="width:0%;"></div>
</div>
And save your template.