Would you like to add a reading progress bar to Blogger Website? In this article I will share with you some simple tricks to add this amazing features to your Blogger website.
$ads={1}
A reading progress bar help your visitors to indicate how much he read. It also help your website looking professional.
{tocify} $title={Table of Contents}
So, you need to Carefully follow the steps below I mentioned guide How to add a reading progress bar in Blogger, and to make your Blogger look professional and awesome, but we first understand what a reading progress bar and what a reading progress bar required.
What is a reading progress bar?
In short, a reading progress bar is a visual representation of how much of a blog post is left. This is achieved by tracking the visitor's status on the page. When they scroll down, the bar starts to fill up, indicating how much progress they have made. Once they reach the end of the post, the bar is full.
What is required to read the progress bar?
Users stay only a few seconds on a webpage before deciding to stay or leave. If you publish long type articles, keeping users busy is less challenging, as they require users to scroll down.
Some website homeowners add inline attached posts, others use video or image galleries to put users on the page.
A reading progress bar is a touch user interface improvement that encourages users to scroll down. It motivates users to read and complete the article.
Many popular websites, such as Daily Animals, use reading progress indicators to engage their readers. In any case, you can still prove that the reading progress indicator is subtle and does not detract from the user experience on your website.
With that said, let’s see how you can add a reading progress bar to Blogger.
How to add a reading progress bar to Blogger.
I'll instruct you to add a reading progress bar to Blogger, well, let's get started!
Step 1. At first, you need to go to the Blogger dashboard.
Step 2. Go to the Themes Section and Click Edit HTML Button.
Step 3. Copy the CSS Code given below and paste it above ]]></b:skin> tag.
/* Reading Progress Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;} .progress-bar{height:5px;background:#F86152;}
Step 4. Copy the below given JS Code and past it above </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 below mentioned html code and past it just below the <body> tag.
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>
$ads={2}
Conclusion
So friends, if you like this post on How to Add Reading Progress Bar in Blogger please share with your friends. I think you must understood How to Add Reading Progress Bar in Blogger.
If you have any questions about this guide or need help please ask me in comment.
For more updates on Blogger Templats, Blogging tutorial like this, please Follow this Blog