Saturday, 2 November 2019

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

News November 02, 2019 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.

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(&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.

About News
alistarbot is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of alistarbot is to provide the best quality blogger templates.