How to Add a Reading Progress bar in Blogger
Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have the reading progress bar. When a visitors visits to a site where they glimpses at a line moving forward as they scroll down or move up.
In this blog, I will help adding a reading progress bar to the Blogger.
What is Reading Progress Bar ?
The reading progress bar, also known as the article progress bar, shows the reading percentage of an article or web page the reader completed.
Why Are Progress Bars Effective?
The average attention span is estimated to be about 8 seconds. Eight seconds feels exaggerated these days.
Gamification has become a popular strategy as marketers seek strategies to engage audiences in this short window.
When we say gamification, we don't mean literally embedding a game like tic-tac-toe into your marketing emails (it works for you, but we'd love to hear about it I think). Gamification means incorporating aspects of the game into your strategy. Integrating game-like aspects such as progress bars greatly improves user interaction. Keep this in mind when playing video games. The map will show you where you are going to meet the next boss, or the distance to the goal in a driving game.
This small change gives users the confidence to complete tasks knowing that the end is near.
Additionally, the addition of progress bars gives rise to the idea of movement, progress, and achievement, not to mention the aforementioned reduction in uncertainty. You can also humanize and personalize the process by creating a step-by-step tracker.
Steps — How To Do It ?
- Login to the Blogger Dashboard.
- Now Go to Theme Section.
- Click on Edit HTML.
- Now Search or tag using Ctrl + F .
- Copy the code below and paste it above the tag ]]></b:skin> .
.thetaluat-progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.thetaluat-progress-bar{height:5px;background:#f4a900;}
- Then copy this javascript and paste below </body> close
<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("myProgress").style.width = scrolled + "%";
}
</script>
- Now copy this HTML code and paste below <body>
<div class='thetaluat-progress-container'> <div class='thetaluat-progress-bar' id='myProgress' style="width:0%;"></div> </div>
Conclusion
So today we have discussed about How to Add a Reading Progress bar in Blogger. I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me. Do visit regularly for getting more updates like this.
Comments
Post a Comment
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.