LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » How To Add A Top Reading Progress Bar in Blogger?

How To Add A Top Reading Progress Bar in Blogger?

How-To-Add-A-Top-Reading-Progress-Bar-in-Blogger
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.

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.

Recommended For You:
New To Blogging Then Here Is SEO Stuffs For Newbie Bloggers

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.

Recommended For You:
How To Make Blogspot Comments Links "NoFollow" Automatically?

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.

You Like It, Please Share This Recipe With Your Friends Using...

56 Responses to “How To Add A Top Reading Progress Bar in Blogger?”

  1. capacious technologies says:

    thanks for sharing a very meaningful blog

    • EXEIdeas says:

      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.

  2. RK says:

    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.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. Our team will reply to your query on email immediately…

  3. Marketing company in dubai says:

    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.

    • EXEIdeas says:

      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.

  4. Priya Sharma says:

    Hey, I appreciate your quality stuff and I would love to read more blogs like this.

    • EXEIdeas says:

      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.

  5. very interesting tnx for the insight

  6. Lego Aid says:

    Hi,
    Thanks for sharing your article,
    Those are good ones, I really appreciate that, keep it up,
    Rebbeca Barnett

    • EXEIdeas says:

      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.

  7. Amazing Info in This BLog Thanks For Sharing This

    • EXEIdeas says:

      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.

  8. You made some good points there. I searched the internet for the problem and found most individuals will go along with with your site.

    • EXEIdeas says:

      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.

  9. Thanks for sharing this article, loved it..great work.

    • EXEIdeas says:

      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.

  10. Meer says:

    Thanks for sharing this article, loved it..great work.

    • EXEIdeas says:

      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.

  11. 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.

    • EXEIdeas says:

      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.

  12. Hey, I appreciate your quality stuff and I would love to read more blogs like this.

    • EXEIdeas says:

      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.

  13. Rohit Jain says:

    Gr8 Article. Very good information.
    Keep up the good Work.

    • EXEIdeas says:

      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.

  14. Hey, Thanks for sharing this informative reminder of new updation, Keep Sharing.

    • EXEIdeas says:

      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.

  15. JHON PAUL says:

    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.

    • EXEIdeas says:

      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.

  16. 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.

    • EXEIdeas says:

      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.

  17. HP Support Assistant Download says:

    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.

    • EXEIdeas says:

      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.

  18. raizawilliams says:

    Since I am not from coding background. Is there any way to add this through plugin???

  19. abhi says:

    Great Work!!!
    Thank you for sharing information.

    • EXEIdeas says:

      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.

  20. Alinani Katende says:

    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?

  21. 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.

    • EXEIdeas says:

      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..

  22. Your content material is amazing and useful for all. Thanks for submitted that content here.

    • EXEIdeas says:

      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.

  23. sanjay says:

    i think its a good idea to add reading progress bar in blogger or any blog, i may increase traffic to other posts

    • EXEIdeas says:

      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.

  24. Mohit_Singh says:

    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!

    • EXEIdeas says:

      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.

  25. Sushant says:

    I think it’s a good idea for any blog to have a reading progress bar. It may help increase traffic.

    • EXEIdeas says:

      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.

  26. Mohit_Singh says:

    Well done on producing this article! I am grateful for the dedication and investigation that was put into crafting such informative and stimulating content.

    • EXEIdeas says:

      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.

  27. Excellent and helpful information. All in all, excellent thoughts, and I love reading your website’s blog posts.

    • EXEIdeas says:

      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.

  28. Neil Hagenes says:

    Excellent and practical knowledge. In addition, I believe your website’s layout and design are excellent.

    • EXEIdeas says:

      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.

Leave a Reply to Meer Cancel reply

Your email address will not be published. Required fields are marked *