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:
How Videos Can Help In Your Website SEO?

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:
8 Effective SEO Techniques To Drive Organic Traffic In 2021

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

  

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

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

Leave a Reply

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