Cara Membuat Progress Loading Bar Blog seperti YouTube

Cara Membuat Progress Loading Bar Blog seperti YouTube - Sudah ada yang pernah lihat progress loading bar YouTube belum? Ya, mungkin sudah ya. Karena secara gitu lho YouTube mesin pencari terbesar didunia ke dua, Masak belum tau???

Progress Loading Bar Blog seperti YouTube ini itu cukup keren dan bisa jadi aksesoris kecil yang tidak akan mempengaruhi loading kecepatan blog. Gimana caranya? Langsung aja yuk!

Cara Membuat Progress Loading Bar Blog seperti YouTube

Pertama Buka Blogger > Template > Edit HTML > Salin dan Paste kode di kotak kode bawah ini dan sisipkan tepat di salah satu kode berikut : ]]></b:skin> atau </style>

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

Kostumasi : height:"2px" untuk ketebalan loading bar. a.bg=a.bg||"#db3131" untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai. Code Source: http://nanobar.micronube.com/

SIMPAN TEMPLATE!

Terimakasih. Semoga bermanfaat.