Cara Membuat Loading Progress Bar Di Blogger

Cara Membuat Loading Progress Bar Di Blogger Keren -  Progress Bar Adalah Salah Satu Loading Yang Pernah Atau Sempat Di Pakai Di Website Yang Sudah Tidak Asing Lagi Yaitu Youtube Cara Kerja Progress Bar Ini Pun Sangat Menarik. Karna Dengan Adanya Progress bar Blogger Kita Akan Semakin Menarik Dengan Adanya Loading Di Bawah Url .. Nah Untuk Cara Kerja Progress Bar Ini Sangat Mudah .. Dan Cara Menerapkan Di Blogger Pun Sangat Mudah ... Oleh Sebab Itu Mari Kita Membahas Atau Mempelajari Cara Membuat Progress Bar Di Blogger ...

Nampak Sangat Elegan Blogger Kita Apabila Di Pasang Progress Bar .. Langsung Saja Ke Tutorial Nya Cara Membuat Progress Bar Keren  Di Blogger 

1. Masuk Ke Blogger > Template > Edit Html > Cari Kode </body>
2. Letakan kode Di Bawah Ini Sebelum Kode </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||"#003333";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>

Catatan : Untuk Merubah Warna Kalian Bisa Cari #003333 Dan Ganti Warna Sesuai Yang Kalian Inginkan .. Dan Untuk Mengubah Besar Kecilnya Progress Bar Kalian Bisa Menyesuaikan Ukuran Dengan Mencari Atau Mengubah Kode 2px 
Demo

Berbagi :