How to add reading progress bar in blogger

I will guide you to Add Reading Progress Bar in Blogger, Ok, let’s begin!

Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.

Step 2. Go to the Themes Section and Click Edit HTML Button.

Step 3. Copy the CSS Code given below.

/* Progress Reading Bar */

.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}

.progress-bar{height:5px;background:#F86152;}

Step 4. Paste the CSS Code above the ]]></b:skin> tag.

Step 5. Copy the JS Code given below.

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 6. Paste the JS Code above the </body> tag.

Step 7. Copy the HTML Code given below.

</div>

Step 8. Paste the HTML Code just below the <body> tag.

Step 9. Click on Save!

How to add reading progress bar in blogger | download source code