How To Add Reading Progress Bar In Blogger Blogspot? - Hello Bloggers, You might seen now a days some of the websites using reading progress bar and you might thinking how to add reading progress bar to your Blogger blogspot website. So I will show you how to add reading progress bar in blogger Blogspot site.
It will work when visitors scroll down on the page or blog post on your website it will move front indicating how much progress they've made. Once they've reached the end of the blog post, the bar is full and if visitor scroll up on the page or blog post it will move back.
By Adding reading progress bar helps visitors to read content better and users will read your content for longer time.
So now let's check how to add a reading progress bar on your Blogger Blogspot!
1. Go to your Blogger Dashboard and Click on Theme Option.
2. Click on Theme Option.
3. Then click on the drop-down menu icon and go to Edit HTML.
4. Now Press Ctrl+F and search ]]></b:skin> and paste this CSS code just above/before it.
If You Want Use Gradient Style Reading Progress Bar Add Below code otherwise Add Above Css code.
5. Save your Template...
Step 2. Add Reading Progress Bar Javascript:
1. Now again Press Ctrl+F and search </body> and paste this javascript just above/before it.
2. Save your template.
Step 3. Add Progress Bar Html Code:
1. Again Press Ctrl+F and Find <body> and paste html code just below/after <body> tag. (In some templates this tag would be adjoined with class or schema, so search for only <body Hint: See below Screenshot).
Now you complete all steps. just Save your theme and your reading progress bar is ready now.
To Show On Blog Posts Only Add This Code:
To Show On Every Page Add This Code:
If you want to change height of bar simply replace height:5px; to your preferred size.
If you want to change color of bar simply replace background:#6c6cfe it with your color code.
Conclusion:
Hope this How To Add Reading Progress Bar In Blogger Blogspot tutorial will be useful to you. Do share with your friends. If you have any doubts related to this article ask me in the comment section.
You might also like: How To Add Preload Animation Effect In Blogger Blogspot
How To Add Custom Scrollbar in Blogger Blogspot Using CSS?
What Is Reading Progress Bar
The reading progress bar is a visual representation of how much a blog post remains and help your visitors to know they reached the end of the page.It will work when visitors scroll down on the page or blog post on your website it will move front indicating how much progress they've made. Once they've reached the end of the blog post, the bar is full and if visitor scroll up on the page or blog post it will move back.
Why To Add Reading Progress Bar In Blogger
By Adding reading progress bar visitors can estimate the length of the blog post and will read your post completely and it will also helpful to attract visitors attraction and helps reduce bounce rate.By Adding reading progress bar helps visitors to read content better and users will read your content for longer time.
So now let's check how to add a reading progress bar on your Blogger Blogspot!
How To Add A Reading Progress Bar In Blogger Blogspot?
Step 1. Add Reading Progress Bar CSS code:1. Go to your Blogger Dashboard and Click on Theme Option.
2. Click on Theme Option.
3. Then click on the drop-down menu icon and go to Edit HTML.
4. Now Press Ctrl+F and search ]]></b:skin> and paste this CSS code just above/before it.
CSS
/* Reading Progress Bar by Blogger4ever.net */
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#6c6cfe}
Gradient Style CSS
/* Reading Progress Bar by Blogger4ever.net */
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px; background: linear-gradient(to right, #ff3030 ,#ff6f00 ,#ffc400);}
Step 2. Add Reading Progress Bar Javascript:
1. Now again Press Ctrl+F and search </body> and paste this javascript just above/before it.
JS Script
<!--[ Reading Progress Bar by Blogger4ever.net ]-->
<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("b4ebar").style.width = scrolled + "%";}</script>
Step 3. Add Progress Bar Html Code:
1. Again Press Ctrl+F and Find <body> and paste html code just below/after <body> tag. (In some templates this tag would be adjoined with class or schema, so search for only <body Hint: See below Screenshot).
HTML
<div class='progress-container'><div class='progress-bar' id='b4ebar'/></div>
Now you complete all steps. just Save your theme and your reading progress bar is ready now.
How To Show Progress Bar In Blog Posts Only?
If you want to show the reading progress bar only on Blog posts then you can Add blogger conditional tag.To Show On Blog Posts Only Add This Code:
Code
/* Reading Progress Bar by Blogger4ever.net */ <b:if cond='data:view.isPost'> <div class='progress-container'><div class='progress-bar' id='b4ebar'/></div></b:if>
Code
/* Reading Progress Bar by Blogger4ever.net */ <div class='progress-container'><div class='progress-bar' id='b4ebar'/></div>
Customization:
You can do further customization if you want to change height and color of Progress Bar.If you want to change height of bar simply replace height:5px; to your preferred size.
If you want to change color of bar simply replace background:#6c6cfe it with your color code.
Conclusion:
Hope this How To Add Reading Progress Bar In Blogger Blogspot tutorial will be useful to you. Do share with your friends. If you have any doubts related to this article ask me in the comment section.
You might also like: How To Add Preload Animation Effect In Blogger Blogspot
How To Add Custom Scrollbar in Blogger Blogspot Using CSS?
