One of my obsessions as a web designer is ensuring that I do everything that I can to make a site as user-friendly as possible. You may have noticed the trend some websites are following, in particular, blogs. Many blog owners are providing some type of animated indicator feature to give their readers an indication of how far along they have read a blog post or page article.
Table of Contents
Reading Position Indicator (RPI):
I’ve seen quite a few web pages that have some kind of an indicator to display the current reading position. Normally, such a Reading Position Indicators are used on blog posts or long-form articles and help users to understand how far they are from finishing the reading but you may also find it Chrome’s android application in the form loading bar (and Apple’s browser Safari, a very similar-looking loading bar).
Some authors want to add progress bars to their blog. However, most authors are not web designers or developers. So they don’t know how to do this. 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. I just added a progress bar to my blog.
Now there are many snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.
Features:
1.) No JQuery File Added.
2.) JavaScript Little Snippet Added But No External File.
3.) Basic CSS Added.
4.) Simple And Quick Load.
5.) Can Work With Any Browser.
How To Add In Blogspot?
Please follow this tutorial very carefully to avoid errors. We will start with implementing HTML, Javascript and CSS then move onto the final step. Just follow this three-step to insert a reading progress bar in a blogger.
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search </body> Code.
7.) Now “Copy” The Below JavaScript And “Paste” It Before Upper Code.
<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>8.) Again Press [CTRL+F] To Search ]]> Code.
9.) Now “Copy” The Below Code And “Paste” It Before Upper Code.
<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
</style>10.) Again Press [CTRL+F] To Search <body> Code.
11.) Now “Copy” The Below Code And “Paste” It After Upper Code.
<div class='progress-container'> <div class='progress-bar' id='myBar' style="width:0%;"></div> </div>
12.) Click “Save Template” And Done.
Customization:
Edit your CSS if you are a pro and want more customization. To change the color edit the background:#F86152 and replace it with your preferred color code. If you need to color code of various colour please visit here. And to change the size of your progress bar edit height:5px and replace the 5px.
Troubleshooting The Errors:
Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.
Last Words:
That’s all we have. We hope that you liked this article. If you have any problem with this code in your blogger template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problem please comment below. We are happy to help you!
If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article.
thanks for sharing a very meaningful blog
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
I went through many guides for doing that, but only yours worked like a charm. I thank you for the efforts that you had put to make this work for bloggers like us. However, I have sent you an email with a query. Hope you can help.
Welcome here and thanks for reading our article and sharing your view. Our team will reply to your query on email immediately…
This blog is undoubtedly one of the best to read. It covers everything I need to know with the right amount of details to make it comprehensible without being overwhelming.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
Hey, I appreciate your quality stuff and I would love to read more blogs like this.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
very interesting tnx for the insight
Welcome here and thanks for reading our article and sharing your view.
Hi,
Thanks for sharing your article,
Those are good ones, I really appreciate that, keep it up,
Rebbeca Barnett
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
Amazing Info in This BLog Thanks For Sharing This
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
You made some good points there. I searched the internet for the problem and found most individuals will go along with with your site.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
Thanks for sharing this article, loved it..great work.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article. Yes, We will cover that topic too.
Thanks for sharing this article, loved it..great work.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article. Yes, We will cover that topic too.
Beneficial article for beginners. I am a beginner too, so these all tips help me a lot thanks for sharing. It’s helpful for this blog. Also great with all of the valuable information you have. Keep up the excellent work you are doing well.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article. Yes, We will cover that topic too.
Hey, I appreciate your quality stuff and I would love to read more blogs like this.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.
Gr8 Article. Very good information.
Keep up the good Work.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.
Hey, Thanks for sharing this informative reminder of new updation, Keep Sharing.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.
Thanks, dear for excellent content delivery. I have read very carefully your post and I got an awesome result. Right now I am very happy to solve my problems after this read content Instruction.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.
No words to explain this post. I am very excited about reading time because I found in this article real information, and it is containing a much more useful method. You know I am facing one small issue past some days finally I solved my problem after reading this post. Thanks so much for sharing as like rich full content.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.
Thanks for sharing such great information, I highly appreciate your hard-working skills as the post you published have some great information which is quite beneficial for me, I hope you will post more like that in the future.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Since I am not from coding background. Is there any way to add this through plugin???
Welcome here and thanks for reading our article and sharing your view. There are many Plugins available over the internet.
Great Work!!!
Thank you for sharing information.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Developer, how can i create a author box that shows the picture of the author or administrator that posted a post and some short bio and social media icons to follow the author on his/his social media platforms,
but my real problem is that i have a website hosted in blogger and i have about 5 author that post articles on my site but, i want when they post it shows the author box of a particular author that post. i know this can be done by using #fetch but i don’t know how to do it. can you please help?
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again. You can visit https://www.mybloggertricks.com/2012/05/display-guest-author-box-automatically.html for your required solution.
I am very obliged to you for sharing this essential knowledge. This information is helpful for everyone. So please always share this kind of information. Thanks once again.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again..
Your content material is amazing and useful for all. Thanks for submitted that content here.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
i think its a good idea to add reading progress bar in blogger or any blog, i may increase traffic to other posts
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Extremely valuable and have helped me gain a deeper understanding of the topic. Thank you for taking the time to write and share this with us. Keep up the excellent work!
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again. Please contact us via the contact form for more info.
I think it’s a good idea for any blog to have a reading progress bar. It may help increase traffic.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Well done on producing this article! I am grateful for the dedication and investigation that was put into crafting such informative and stimulating content.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Excellent and helpful information. All in all, excellent thoughts, and I love reading your website’s blog posts.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Excellent and practical knowledge. In addition, I believe your website’s layout and design are excellent.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
Your blog consistently delivers high-quality content that is both informative and engaging, ensuring a positive user experience for readers.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
I love your content, I discovered you recently and can’t stop to read every post. Your examples really helped me to understand what you meant.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
In the world of pest control, having the expertise and proper techniques can make all the difference in successfully removing unwanted creatures from your home or property. From pesky insects to stubborn rodents, the ability to effectively eliminate pests requires a combination of knowledge, experience, and skill. In this blog post, we will explore some expert advice on pest control techniques for achieving optimal results. Whether you’re dealing with a minor infestation or a more resilient pest problem, this post will provide valuable insights to help you successfully rid your space of unwanted invaders.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.
I think this is an informative post and it is very useful and knowledgeable. Therefore, I would like to thank you for the efforts you have made in writing this article.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.