Hello guys, if you want to Add a reading progress bar to your website, and you want to learn Without Plugin. Then this post will be helpful for you in that.
In this tutorial, I will teach you how to add a reading progress bar to WordPress without needing a plugin. You only need to add a few lines of code to your footer.php file. To enable the reading progress indicator, follow the steps below.
To begin, navigate to Appearance > Theme file editor in your WordPress dashboard.
Find the footer.php option on the right side and then the line tag.
Update the code by pasting the provided code above this line. The reading progress indicator will now appear in the front-end.
<style>
#site-navigation{margin-top:10px!important;}
.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}
.K2progress {width: 100%;height: 7px; z-index: 1111;background: #ccc;}
.progress-bar {height: 7px;background-color:tomato;width: 0%;}
</style>
<div class="reading-meter"><div class="K2progress"><div class="progress-bar" id="myBar"></div></div> </div>
<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>If the reading progress indicator does not work after inserting the code, clean the cache on your website, as well as the cache on your browser, and try viewing the site in incognito mode.
The same code can also be used on the Blogger website. Despite the fact that I have already released a guide on how to add a reading progress indicator to Blogger.
Advantages of Reading Progress Bar
Reading Progress bar is highly useful for grabbing user attention and providing continual feedback on how far he or she has read the content so far. As a result, it encourages people to read the entire article.
This will increase your reading duration and decrease your bounce rate. It also improves ad viewability, which means more clicks and impressions on your advertising. It can indirectly assist you increase your earnings as well as your SEO.
As a result, it is a simple technique to improve user experience on the website.
If you don’t want to contribute coding and rather to use a plugin, you can install the read metre plugin. To learn more, watch this video instruction.