WebSite under Editing... Hue hue!
Home
BETTER ADSENSE EARNING
BLOGGER SCRIPTS

[NEW] How to Add a Reading Progress bar in Blogger with [LIGHTWEIGHT] CSS and JavaScript for FREE [SUPERFAST]

When the website visitors visits the website that adds a reading progress bar they can see a line going front when scrolls down and going back when sc

Hello friends,  Welcome to our Blog we have seen many websites using the reading progress bar and you also thinking about how to add a reading progress bar to your Blogger website. So we published an article to show you how to add a reading progress bar in Blogger. So without wasting time let's check!

First of all, we would like to give some information about the Reading Progress bar.

How progress bar works?

When the website visitors visits the website that adds a reading progress bar they can see a line going front when scrolls down and going back when scrolls up it works with using some codes in your Blogger website.

Should you add a Reading progress bar?

In my opinion, I will tell yes you want to add a reading progress bar in your Blogger website because your website visitors will think of this like as a challenging example: to read the article completely and the progress bar will help to read the article completely for visitors and your website impressions increases.

How to add a reading progress bar in Blogger?

  • First, go to Blogger
  • Then click on the Theme option
  • Then you can see a down arrow near customize click on that
  • Then click on Edit HTML
  • Then press CTRL+F and find ]]></b:skin>
And copy this CSS and past above ]]></b:skin>
.AC-progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.AC-progress-bar{height:5px;background:#f4a900;}
Then copy this javascript and paste below </body> close 
<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("myProgress").style.width = scrolled + "%";
}
</script>
Now copy this HTML code and paste below <body> open 
<div class='AC-progress-container'>
<div class='AC-progress-bar' id='myProgress' style="width:0%;"></div>
</div>
And save your template.

progress bar in blogger mat-progress-bar module mat progress bar css mat-progress-bar example
This way you can add a reading progress bar on your Blogger website. Hope this article will helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting our site!

Rate this Article

Post a Comment