If you want to do guest posting click here. Guest Post!

How to Add Progress Bar in Blogger Website

How to Add Progress Bar in Blogger Website

Hello friends, welcome to all of you in the blog, so in today's article, I am going to tell you how you can make the progress bar mandatory on your blogger website. First, if you don't know what is Progress Bar and how can we implement it. So with the help of this article, you will get to know and also if you are facing any problem then you can connect and ask.

  • So first of all you have to go to your blogger dashboard
  • After that, you have to click on the theme
  • After clicking on the theme, you have to click on Edit HTML

After this you have to copy the CSS code given below and paste it above the body, you can paste it into the close  </body>  tag.

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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)},200))):(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||" #0000ff";this.bars=[0];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>

If you want to change the color of the Progress Bar, then replace it with your favorite color with the  #0000ff  given code and save the theme.

So friend, in this way you can add progress bar to your blogger website, so if you liked the article, then definitely tell us in the comment below.

Post a Comment