JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

header img
How to add Reading progress bar in Blogger

How to add Reading progress bar in Blogger

#Blogger
0
(2)
author-img
غير معرف
Hello, friends welcome to Blogging doses. You might be seen nowadays some of the websites using reading progress bar and you might be thing how to add a reading progress bar to your Blogger website. So we made a tutorial for you about how to add a reading progress bar in Blogger.

The reading progress bar helps users to read the complete post and if your website doesn't have a scroll bar then the reading progress bar will help your visitors to know if they reached the end of the page. 

It will work when visitors scroll down on the page or post on your website it will move front. If visitors scroll up on the page or post it will move back.

Do you want to add a reading progress bar on your Blogger website? In my opinion, I will tell yes. And you might be thinking what are the reasons I already added reasons. I think you can now understand what are the reasons you want to add a reading progress bar on your Blogger website.

So now let's check how to add a reading progress bar on your Blogger website!

How to add a reading progress bar in Blogger?

Important: Before doing these steps we recommend you take a backup of your template. By chance, if any mistake is done you can restore it later.

  • First, go to your Blogger dashboard
  • Then click on Theme
  • Then click on the drop-down menu icon near Customize
  • Then click Edit HTML
Now find ]]></b:skin> and paste this CSS just above it
/* Reading progress bar CSS */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:2px;background:#6200EE;}
Then find <body> and paste this HTML code above it

To show on every place

<!--[ Reading progress bar ]-->
    <div class='progress-container'>
    <div class='progress-bar' id='BD-Bar' style='width:0%;'/>
    </div>

To show only on posts

<!--[ Reading progress bar ]-->
    <b:if cond='data:view.isPost'>
    <div class='progress-container'>
    <div class='progress-bar' id='BD-Bar' style='width:0%;'/>
    </div>
    </b:if>

Use anyone. if you want to show the reading progress bar on every place then use To Show on every place HTML code or if you want to show the reading progress bar only on posts then use To show only on posts HTML code.

Then find </body> and paste this javascript just above it
<!--[ Reading progress bar JS ]-->
<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("BD-Bar").style.width = scrolled + "%";
}
</script>
Then save HTML.

Now you successfully added the reading progress bar on your Blogger website!

Conclusion

Hope this How to add reading progress bar article will be useful to you. Do share with your friends. If you have any doubts related to this article ask me in the comment.

Thanks for visiting our site!
نموذج الاتصال
الاسمبريد إلكترونيرسالة

google-playkhamsatmostaqltradent