Home  ›  blogging-tips

How to add a Reading Progress Bar on Blogger

Post a Comment
How to add a Reading Progress Bar on Blogger
After a long break of publishing about a blogger template, today I came up with an interesting feature to grab the user's attention on your blogs/websites, yes I'm talking about Reading Progress Bar (RPB). I've seen some websites that have some kind of Progress Bar to indicate the current reading position.

when you scroll down, there will be a progress bar on the top of the page showing the progress of your reading on this post.
Normally, such a Reading Position Indicators are used on blog posts or lengthy articles and help users to understand how far they are from finishing the reading.

Table of Contents


in this post, I will share a super optimized js code for reading progress bar ( Reading Progress Indicator). Javascript causes your blogger to slow down.

Reading Progress Bar is a great feature for blogs that gives an idea about the length of our article and deliver an optimal experience to your users.

How to add a Reading Progress Bar On your blog

In this post, we will learn how to add Reading Position Indicator to blogger blog, to apply it we have to follow the simple steps: Sign in Blogger Dashboard >> Template >> Edit HTML

Before taking any action we would recommend you make a backup of your existing template so that if anything goes wrong you still have your blog template safe.

Each step must be followed very carefully to avoid errors. First, We will implement Javascript then CSS, and then Html code.
So let's start.

Step-1 Add Javascript code

Copy the following Javascript code and paste it just above the </body> tag 
<script type='text/javascript'>
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 Add CSS code

Now copy the following CSS code and paste it just above the ]]></b:skin> or </style>
.progress-container{width:100%;position:fixed;z-index:99}
.progress-bar{height:5px;background:#F86152}

You can change the height and background of reading progress bar

Step-3 Add html code

After that copy the following HTML code and paste it just below the <body> tag (In some template this tag would be adjoined with class or schema markup) 
<div class='progress-container'>
<div class='progress-bar' id='myBar'/>
</div>
Congrats! you have completed all the steps.

Conclusion

We hope that you liked this post on Reading Progress Bar in Blogger. If you have any doubts and problem please comment below. We are happy to help you! If you liked this post, then please do share it with your friends.
blogging-tips
SHARE WhatsApp

Related Posts

Post a Comment

Post a Comment