Hello Guys ! Welcome back to Techy DarshaN, Toady our tutorial is How to Add Gradient Reading Progress Bar in Blogger ? You may have observed that many websites are having some type of animated indicator feature sticked at the top of the post to give their readers an indication of how far they have read a blog post or page article. So in this post I am sharing a tutorial about Adding Gradient Progress Bar to Your Blogger site. And I am providing a Advanced Progress Bar with Gradient Effect.
Pros
- New Colourful Gradient Look
- Indicate the users about their reading progress
- Change your old Progress bar to this gradient style
- Attractive Animation
- Lightweight script
What is Reading Progress Bar?
You may have see that the most of the website have some kind of an indicator sticked at the top of their site that is Called as Reading progress Bar. Reading Progress bar is a visual representation of how much of the post did the users read and how much of the post remains still. It achieves this by tracking the visitor's reading progress on the page. As they scroll down, the bar begins to fill, indicating how much they have read. Once they've reached the end of the post, the progress bar will be filled.
Normally, such a Reading Progress Indicators are used on blog posts or long-form articles to help the readers to understand how far they have finished reading post. Some authors or site owners want to add progress bars to their website. But, most authors and site owners are not web designers or developers. So they don’t know how to add this Progress Bar. Well, there is a secret in the HTML development world. The secret is that “Everything is easy once you know how to do it.” Yes, it is actually pretty easy to add a progress bar to your blogger website just follow some simple steps.
Demo
As you can see My site in which you are reading this post I have added a Progress Bar sticked at the top which helps the readers to know how long did they read and how much post remains still.
How to Add Gradient Reading Progress Bar in Blogger ?
Step 1 : Go to your Blogger Dashboard
Step 2 : Go to Themes and then go to Edit HTML
Step 3 : Now Search for
]]></b:skin> and paste the following CSS just above it.You can change the Highlighted colour codes according to Theme if necessary
/* Progress Reading Bar by Techy DarshaN*/
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px; background: linear-gradient(to right, #ff3030 ,#ff6f00 ,#ffc400);}</body> and paste the following Js just to above it <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> <div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div> <body> instead of adding the above HTML . <b:if cond='data:view.isPost'> <div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div> </b:if>
Conclusion
In this post I have made a Step-by-step tutorial on How to Add Gradient Reading Progress Bar in Blogger. Adding this Progress Bar to your website is very useful and essential as it Indicates Reading Progress to the users and it is very also attractive with Gradient colours. I hope you have liked it and please do share with your friends and let them also know about this Progress bar.
If you have any questions please feel free to ask in comments section or You can join our Telegram Group for Discussion .