كيفية إضافة شريط تقدم القراءة في مدونة بلوجر

<style>
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#0000FF;}
</style>

<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div>

<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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
</script>