How to Add Reading Progress Bar in Blogger
Would you like to Add Reading Progress Bar in Blogger? To Add Reading Progress Bar in Blogger and make your blogger blog look amazing, carefully follow the steps below.
 |
| How to Add Reading Progress Bar in Blogger |
What is Reading Progress Bar?
In a nutshell, a reading progress bar shows how much of a blog post is still to be read. By keeping track of the visitor's location on the page, it accomplishes this. The bar starts to fill as they scroll down, showing how much progress they've made. The bar is full once they get to the end of the post.
What is the need of Reading Progress Bar?
Users spend only a few seconds on a website before deciding whether or not to stay. When you post long articles that users have to scroll down to read, it's a little harder to keep them interested.
Some website owners keep people on the page by putting related posts right next to each other, while others use videos or picture galleries.
A reading progress bar is an improvement to the touch user interface that encourages users to scroll down. It also encourages people to finish what they're reading.
Reading progress indicators are used by many popular websites, like the Daily Beast, to keep their readers interested. But you may also need to make sure that the reading progress indicator isn't too obvious and doesn't make it hard for people to use your website.
So, let's take a look at how easy it is to add a reading progress bar in blogger.
How to Add Reading Progress Bar in Blogger?
I'll show you how to Add Reading Progress Bar in Blogger, so let's get started!
Step 1: Go to Blogger dashboard.
Step 2: Go to Themes Section and click Edit HTML.
Step 3: Paste the CSS code provided below just before the ]]></b:skin> tag
/* Progress Reading Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
Step 4: Copy the JS code provided below and Paste 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("myBar").style.width = scrolled + "%";
}
</script>
Step 5: Copy the HTML code below and paste after the <body> tag.
<div class='progress-container'> <div class='progress-bar' id='myBar' style="width:0%;"></div> </div>
Step 9: Save theme.
Visit Blogpen to get Latest Blogging Tips, Blogger Templates, Blogger Scripts, SEO Tips and Adsense Tips to grow your earnings.
Conclusion
So, friends, how did you like this post on How to Add Reading Progress Bar in Blogger? You should now know how to add a progress bar to Blogger.
How did this article on How to Add Reading Progress Bar in Blogger make you feel? by leaving a comment so that we can all learn from your ideas and improve something.
Farhan
Hello there, My Name is Farhan and Welcome To My Website. My Passion is to Share Knowledge With Everyone. Also I am a Larner.
