How to Add a Reading Progress Bar in Blogger [Optimised] | PC Week

How to Add a Reading Progress Bar in Blogger [Optimised]

Wednesday, March 13, 2019

How to Add a Reading Progress Bar in Blogger [Optimised]

Reading Progress Bar in Blogger
This article covers all the necessary instructions and code to insert a working reading progress bar in blogger without a third-party website and minimized javascript. Javascript causes your blogger to slow down.

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.

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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;}</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.
bm

I'm an Electronics Engineer with years of experience in Blogging and DIY Projects. I like to make new gadgets and write contents related to technology and Blogging.

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.