How to Add Reading Progress Bar in Blogger

How to add reading Progress Bar in Blogger - First of all we should know What is Progress Bar.

Now it's easy to add reading Progress Bar in Blogger by simple steps.

And you don't need any third-party to add reading Progress Bar in Blogger or anyone, you can add a Reading Progress Bar in Blogger by adding some codes in your theme source code .

Here I'll a give you all a universal code to Add Reading Progress Bar in blog website or any other blog.

After Adding Reading Progress Bar in Blogger website, you can see it will look similar like wordpress reading Progress Bar.

What is Reading Progress Bar ?

Reading Progress Bar is a kind of tool which we use it to let the readers or viewers of your website to know how much of the webpage left to read by showing a little horizontal bar on the topmost of the web page.

Also Read : Google AdSense Definitive Guide 2022

Why do you need a reading Progress Bar on a website

Using Reading Progress Bar in blogger makes users easy to know how much of the web page or blog post is still left.

It saves the users time if they know how long is your post.

If we visit a web page and we don't know how long it is, we will scroll little then we will leave the site.

But if we know how long is webpage or blog post, then we stay to the page or blog post which reduces the bounce rate and eventually helps in adsense earnings.

So today we are gonna know the steps to add Progress Bar in Blogger.

Just follow all these steps to add reading Progress Bar in Blogger.

Steps to add reading Progress Bar in Blogger

Before adding the codes in your theme please take a backup of your sites theme in case if you placed codes in wrong places , it can affect your website or Blogger site.

STEP 1 : Copy the given JavaScript and paste it above the </body> end tag in your Bloggers theme source code (HTML codes).

Find </body> tag as shown in the picture.

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


Step 2 : Then Copy the CSS code given below and paste it above the ]]></b:skin> in Bloggers theme source code (HTML Codes).

  
    
Find ]]></b:skin> as shown in the picture.

  /* Progress Reading Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
    .progress-bar{height:5px;background:#F86152;}
STEP 3 : Now Last step , Copy the given HTML Code and paste it just below the opening <body> tag (In some template this tag would be adjoined with class or schema).

  
    
Find <body> as shown in the picture.

  <div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
That's all you've to do to add Progress Bar in Blogger.
Editing the Colour and Size of Progress Bar 
If you want to change the colour and size of the progress bar in blogger, it's easy.
To Change the colour of Progress Bar in Blogger, edit the background: #F86152 and replace with the colour code you like to have.
If you need various colours code of various colours, you can search it on google or I'll update the colour codes here.
And if you want to change the size of your progress bar , edit height: 5px and replace the 5px with your preferred size of progress bar in blogger (And You can use inspect element to view and edit the bar with live view).

TO FIX Redirect Error in Google Search Console, check out this video.

How to Add Reading Progress Bar in Blogger