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 give an idea about the length of our article.
Table of Contents
Reading Progress Bar in Blogger
Please follow this tutorial very carefully to avoid errors. 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.
Step 1
Copy the below Javascript and paste it 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>Step 2
After that copy the below CSS and paste it above the ]]></b:skin>
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}Step 3
Paste the HTML code 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>That's all you've done!
Editing the Colour and Size of Progress Bar
To change the colour edit the background:#F86152 and replace with your preferred colour code. If you need to colour code of various colour please visit here.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)
Troubleshooting the Errors
Do it with care and patience. Double check all codes and scripts. If you find any error you can contact us anytime, We are always here to help you.Conclusion
We hope that you liked this article on Reading Progress Bar in Blogger. If you have any doubt and problem please comment below. We are happy to help you!If you liked this article, then please do share with your friends. You can also find us on Twitter, Facebook, YouTube, and Instagram.
DISQUS
Disqus Comments
FACEBOOK
Disclaimer : Muhammed Fasil K is a participant in the Amazon Services LLC Associates Program, an affiliate program to earn commission by advertising and linking sites to Amazon products.