How to Add Reading Progress Bar in Blogger
In Blogger or WordPress Website or any website, we should Add Reading progress bar which is also known as Reading Progress Indicator. It is a simple Reading Progress Bar CSS and JavaScript Code by which the sticky reading progress bar and only appears when the post comes into view. Scroll down and you will see a reading progress bar on the website as you go down.
Now you can easily add a reading progress bar to the blogger website just by applying simple coding in the theme section. You don't need any minimized javascript or any third-party applications to apply the reading progress bar in blogger.
 |
| Add Reading Progress Bar Indicator CSS code |
So, How do I add a progress bar on Blogger? The answer is to follow the below steps carefully to Add a stylish reading progress bar to the blogger website, and make your blogger blog look remarkable, first let's understand What is a Reading Progress Bar or Reading Progress Indicator and What is the need for an Adding Reading Progress Bar CSS and JavaScript code?
More tool scripts for blogger: YouTube video downloader script for blogger
Note: we provide you with the universal code to add a progress bar to any blogger blog website. This is just a similar version as you see in a WordPress website. we present you with the optimized universal code for adding reading progress indicators. Which is suitable for any website or blog.
What is Reading Progress Bar?
Reading Progress Indicator is typically a horizontal progress bar or text indicator that tells the user how far they've scrolled the webpage and/or displays the estimated time to finish reading your article and blog post
In more simple words, a reading progress bar or reading progress indicator is a visual representation of how much of a blog post remains. It achieves this by tracking the visitor's position on the page. As they scroll down, the bar begins to fill, indicating how much progress they've made. Once they've reached the end of the post, the bar is full.
Need of Reading Progress Indicator CSS JavaScript Code
Reading progress bar is very useful in blogs which gives an idea about the length of our article and it also looks professional and very attractive. A reading progress bar adds a touch user-interface improvement that encourages users to scroll down. It also motivates users to complete the article they're reading.
Nowadays most users prefer to scroll through the articles and scan the headings and other important parts of the website. No one wants to read long blog posts and their attention span is very low.
So, adding a reading progress bar helps readers understand the content better and users want to read the content for longer times. Eventually, it helps affect positively your website bounce rate and also AdSense revenue.
Very useful script: Download Timer Script for Blogger
So, let's use javascript reading progress bar how you can add the progress bar to your blogger website.
Steps to Add reading progress bar indicator
Finally, now after reading the above explanation you got an idea about Reading Progress Indicator Right. So please follow this tutorial very carefully to avoid errors. We will start with implementing HTML, Javascript and CSS then move on to the final step. Just follow this three-step to insert a reading progress bar in a blogger.
You make like our: URL Shortener Blogger Template
Steps below steps to Add Reading Progress Bar in Blogger.
1. At first, you need to go to the Blogger dashboard. Login and open your blog for edit.
2. Go to the Themes Section and Click Edit HTML Button.
3. Now “Click” Within Editor and press [CTRL+F] To Search </body> Code.
4. Copy the below Javascript and paste it 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>
5. Again Press [CTRL+F] To Search ]]></b:skin> Code. Now Copy the Below Code and paste it above the ]]></b:skin>
.progress-container{width:100%;position:fixed;z-index:99} .progress-bar{height:5px;background:#F86152}6. The Last step is to Copy below HTML code and paste just below the <body> tag (In some templates this tag would be adjoined with class or schema)
<div class='progress-container'>
<div class='progress-bar' id='myBar'/>
</div>7. Click “Save Template” and your reading progress bar is ready on the blogger website.
For other than blogger website just uses above pure javaScript reading progress bar CSS code in your website.
Also, you should check our first time in blogger Keyword Generator Tool Script for free for a lifetime.
Edit JavaScript Reading Progress Indicator
Now for design customization like changing color and height so to color in CSS edit the background:#F86152 and replace it with your preferred color code. It is in hex value you can directly google for color code. And to change the size of your progress bar edit height:5px and replace the 5px.
How to show the progress bar in posts only?
One more important note is above code will also work on every page on your websites like homepage, pages, and blog. So If you want to show the progress bar only in the blog posts then you can use the blogger conditional tag in the above code.
Here, you can wrap the step1 and step 3 code with the conditional Tags and paste it above the </body> tag.
<b:if cond='data:view.isPost'> <--Insert code here--> </b:if>Well, That's it in this post now open your website and verify Breaking News Ticker in Blogger or any website where you used it.
Also, every blogger website need an HTML sitemap generator for Blogger
In Conclusion of Add Reading Progress Bar Indicator JavaScript Blogger
In this article, I provided you one of the best and simple JavsScript Breaking News tickers. So if you like this article, then definitely share it with your friends.
We are providing you many amazing scripts for free, So please follow us on YouTube Channel to get all updates and more useful content.
Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. If you have any doubts and problems please comment below. We are happy to help you!
ConversionConversion EmoticonEmoticon