Add Progress Bar Like Youtube On Blogger.com Blogs ~ Blogging Crave

Have you guys might have noticed that YouTube is unblocked in Pakistan so I have seen there a Progress Bar which is show when video is going to play so I have decided to make a as it is Progress Bar for my blog readers and I have created that using Jquery and I really hope that it'll liked by all of my readers because I have worked hard for it and as you know if you work hard on any thing then it gives a great result and It is pretty stylish and attractive which help you to attract visitors towards your blog. So what are you waiting for let's start the post from below and give you the amazing Progress Bar like YouTube for your blog.

Demo of this widget is on my blog so reload the page and see the demo.

How To Add Progress Bar Like Youtube On Blogger.con Blogs

Go to Blogger >> Template >> Edit HTML
Find <body> and add the code just before <body>

<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>

Save your Template.
Enjoy!!!

Final Words

So finally I gave you this awesome Progress Bar Like Youtube and I hope that you will like this widget when you'll add this awesome widget in your Blogger Blog. If you like my efforts then please don't forget to share this widget as Sharing is Caring! Peace & Happy Blogging!

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.