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:
The Best Ways Of Facilitating Sitelinks That Have Considerable Impact On 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:
You Want To Know Why Your Content Is Not Going Viral?

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

  

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

  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.

Leave a Reply

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