How to Add a Reading Progress Bar In Blogger?

To add Reading Progress Bar to Blogger, you have to follow some simple steps, if you want to add Reading Progress Bar to your Blogger Blog or Website, then follow the steps given below.

Read More: How to Disable Ad Blocker Detection For Blogger?

  • First of all you have to open your Blogger Dashboard.
  • Now after clicking on “Theme”, you have to click on “ Down Arrow Button” next to “Customize”
  • After this you have to search “</body>” tag by clicking on “EditHTML”
  • After this you have to copy the code given below and paste it above </body> and click on Save.
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

When you follow all these steps, Progress Bar will be added to your Blogger’s Blog and Website.

We hope that you how to add Progress Bar in Blogger? If you have any question related to this post in your mind, then you can ask us through the comment box below.

Sharing Is Caring:

Hello Friends, My Name is Roton Kumar Roy (Founder) I am a Full-Time Blogger, Youtuber and Digital Marketer. I have start infotechbot.com for those people who want to learn Complete Blogging Course sitting at home for free online.

Leave a Comment