When the website visitors visits the website that add 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.
.webp)
If you want to add a reading progress bar in your Blogger template let's start without wasting the time...!
1. Copy the below Javascript and paste it above the </body> tag
<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>
2. After that copy the below CSS and paste it above the
]]></b:skin>
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}
3. Paste the HTML code just below the <body> tag (In some template this tag would be adjoined with class or schema)
<div class='progress-container'><div class='progress-bar' id='myBar'/></div>
.webp&description=How to add progress bar on your Blogger website ){kind=link}
1 Comments
I couldn't get this done. Looks like my Blogger template is different.