Mixed Story

     

    First of all we know what is Progress Bar? So let's talk about this Progress Bar, so this one

There is a feature line which keeps on increasing. If you have ever noticed, then if you like YouTube

If you open it in Desktop Mode, then on the top you will see a red colored Progress Bar.

    So let me tell you that you can also put this type of Progress Bar in your blog.

If the blog is on WordPress, then you can get some plugins. But if your blog is on Blogger then

You might be a little worried. Because in this process some script has to be used.

Let's start

Step 1 You need to log in to your Blogger dashboard.

Step 2 You will get a code in the box below. And you need to copy it all to </body>

<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)},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||"#ff0a0a";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>

height: "3px" is the size code. So please change the size code of your choice.

"# ff0a0a" is a color code. So please change the color code of your choice.