This article covers all the necessary instructions and code to insert a working reading progress bar in blogger that is 100% working without a third-party website and minimized javascript.
Of course, Javascript causes our website blogger to slow down but taking this problem as solution we have minimized the javascript so that it don't causes your SEO or Core Web Vitals.
Keeping that in mind we present you the optimized universal code for reading progress bar. Which is suitable for any website or blog. Reading progress bar is very useful in blogs which gives an idea about the length of our article and it also looks professional and very attractive.
Note: In this post, some links may have affiliate links. (Don't be selfish, if you are planning to buy some services online I refer you to use by affiliate links so that both user and affiliate user can take advantage and blogger can earn something with his hardworking of writing.) This is what I think, take care of each other. If you agree to this point than share it with your loved ones.
How To Add Reading Progress Bar In Blogger
![How To Add Reading Progress Bar In Blogger[100% Working] Fully Optimized](https://1.bp.blogspot.com/-83af_fd77H8/YHrazdLGOII/AAAAAAAAAYg/YUO3qAQ_3jM5SJdEMgBW2jzHDk5YqKKZwCLcBGAsYHQ/s1600-rw/reading-progress-bar-in-blogger.png)
Please follow this tutorial(given below:) very carefully to avoid errors. So, We will start with implementing Javascript, CSS and then move onto the final step. Just follow this three-step to insert a reading progress bar in blogger.
And if then, you find errors then comment us so that we can resolve your issue and we can help you.
Before you start reading this article, Just Try my recommended Hosting.
Step 1
As we decided, first we will look onto Javascript so that you understand it well. To implement Javascript for progress bar just copy the below javascript code and paste it into your blog/website.
Paste the code above anywhere in </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>We have now implemented the javascript, now it's time to complete CSS code which will define the style for progress bar.
Step 2
After that just copy the below CSS code and paste just above ]]</b:skin>
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}Till now we have completed all our progress bar setup and in next step we will show a progress bar. So, look it carefully to avoid errors.
Step 3
Now Paste the HTML code(Given below:) just below the <body> tag (In some template this tag would be adjoined with class or schema)
<div class='progress-container'> <div class='progress-bar' id='myBar'/> </div>This is what you all have to do, while making a attractive and professional Reading Progress Bar For Blogger.
Editing The Colors and Size Of Your Progress Bar
You May Like: Ranking a BlogSpot Easily on Google | Apply SEO
To change the colour edit the Background: #F86152 and replace with your preferred colour code. If you need to change the colour code then comment me or find on Google.
And to change the size of your progress bar edit height: 5px and replace the 5px. (You can use inspect element to view and edit the bar with live view) and yes change the height in such a way that it looks great.
And to change the size of your progress bar edit height: 5px and replace the 5px. (You can use inspect element to view and edit the bar with live view) and yes change the height in such a way that it looks great.
Troubleshooting & Errors You Can Face
You May Like: How To Add Code Box In A Blogger Posts With CSS
As you know we have successfully completed for How To Add Progress Bar In Blogger but if you are writing any code wrong code then it can cause a troubleshoot. But, if you find errors then my comment box is empty just fill with your query.
Do you want to open a website at minimum cost that gives you huge features then try my recommended hosting provider.
- Free domain for 1st year.
- Lowest Hosting Plans.
- Huge Features & 1-click WordPress install.
Conclusion
Congrats! Today you learned more about How To Add Reading Progress Bar In Blogger[100% Working] Fully Optimized so always be the first to comment us and tell how helpful is this article.
Thanking you! For giving your precious time to us.
Please visit us again...
Disclosure: This article may contain “Affiliate Links” it means we earn commission when you click through affiliate links on our blog (Without any extra cost to you).