Do you want to Add Reading Progress Bar in Blogger? Follow the below steps carefully to Add Reading Progress Bar in Blogger, and make your blogger blog look remarkable, first let's understand What is a Reading Progress Bar and What is the need of a Reading Progress Bar?
What is Reading Progress Bar?
In a nutshell, a reading progress bar is a visual representation of how much of a blog post remains. It achieves this by tracking the visitor's position on the page. As they scroll down, the bar begins to fill, indicating how much progress they've made. Once they've reached the end of the post, the bar is full.
What is the need of Reading Progress Bar?
Users pay only a handful of seconds on a webpage before deciding whether to stay or leave. Keeping users engaged becomes very little more challenging if you publish long type articles, as they need users to scroll down.
Some website house owners add inline connected posts, others use videos or image galleries to stay users on the page.
A reading progress bar adds a touch user-interface improvement that encourages users to scroll down. It also motivates users to complete the article they're reading.
Many popular websites just like the Daily Beast, use the reading progress indicators to engage their readers. However, you furthermore may got to certify that the reading progress indicator is subtle and doesn't ruin user experience on your website.
Having said that, let’s see how you'll be able to simply add a reading progress bar in blogger.
How to Add Reading Progress Bar in Blogger?
I will guide you to Add Reading Progress Bar in Blogger, Ok, let’s begin!
Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.
Step 2. Go to the Themes Section and Click Edit HTML Button.
Step 3. Copy the CSS Code given below.
/* Progress Reading Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}Step 4. Paste the CSS Code above the ]]></b:skin> tag.
Step 5. Copy the JS Code given below.
<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 6. Paste the JS Code above the </body> tag.
Step 7. Copy the HTML Code given below.
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>Step 8. Paste the HTML Code just below the <body> tag.
Step 9. Click on Save!
Conclusion
So friends, how did you guys like this post onHow to Add Reading Progress Bar in Blogger?Now you must understood How to Add Reading Progress Bar in Blogger.
Tell us how you felt about this article on How to Add Reading Progress Bar in Blogger? by writing a comment so that we too can have a chance to learn and improve something from your ideas.