Hello, friends welcome to Game Adda World. Nowadays you might be seen reading the progress bar on some of the websites. You might be thinking about how to add a reading progress bar on your Blogger website. So we made a tutorial for you about how to add a reading progress bar in Blogger. So without wasting any time let's start.
How does the reading progress bar work?
It will show a progress bar in the header like when visitors scroll down it will go front when visitors scroll up it will go back. It was designed with CSS, HTML and Javascript.
Advantages of adding the reading progress bar
If your website does not have a scrollbar then it will help your website visitors to know the website reached the end or not. It might increase your website impression. This might visitors make as game or challenge like the complete reading full article and that will motivate the visitors to read the article completely.
How to add a reading progress bar?
- Go to Blogger
- Then select the Theme option
- Click on the drop-down arrow
- Then click the Edit HTML option
- Now find ]]></b:skin>
Then paste this CSS above ]]></b:skin>
/* Reading Progress Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:2px;background:#6200EE;}Now find <body> and paste this HTML code just above it
<!-- Reading progress bar -->
<b:if cond='data:view.isPost'>
<div class='progress-container'>
<div class='progress-bar' id='GAW-Bar' style='width:0%;'/>
</div>
</b:if>Then find </body> and paste this javascript just above it
<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("GAW-Bar").style.width = scrolled + "%";
}
</script>Then save.
Conclusion
Hope this post will helpful to you. If you have any doubts ask me in the comment. Thanks for visiting!