Hi Friends, Today we will learn how to add reading progress bar blogger. There are many blog owners and bloggers who want to show the curr...
Hi Friends,
Today we will learn how to add reading progress bar blogger.
There are many blog owners and bloggers who want to show the current reading status of the visitors like as post read percentage, page views etc.
The blogger has provided such feature in its official dashboard but not as your template options (blogger widgets).
What is reading progress bar?
Reading progress bar (also known as a Reading Meter) gives readers an idea of how long it would take to finish reading your blog post.
What’s more, it even alerts some one when they reach the end of the article.
This feature allows you reader to go through other blogs and pages without worrying about finding their way back to where they stopped or lost their place.
Lets start how to show our visitors the post read percentage status now onwards.
Here is my step by step article so that beginners can also do it easily.
why you should add reading progress Bar?
users pay most effective a handful of seconds on a web site before identifying whether or not to stay or go away. maintaining customers engaged becomes very little extra difficult if you submit long kind articles, as they need users to scroll down.
a few website residence proprietors add inline related posts, others use films or photo galleries to live customers at the web page.
A studying development bar adds a hint person-interface development that encourages customers to scroll down.
It additionally motivates users to complete the item they’re analyzing.
Many famous websites just like the day by day Beast, use the reading progress signs to interact their readers.
but, you moreover may additionally were given to certify that the reading progress indicator is diffused and doesn’t break user revel in on your internet site.
Having stated that, permit’s see how you’ll be able to without a doubt upload a reading development bar in blogger.
How This Reading Progress Bar Script Works
How do I add a progress bar on Blogger?
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
<div class=”progress-container”>
<div class=”progress-bar” id=’myBar’ style=”width:0%;”></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>
.png)
COMMENTS