Membuat Progress Loading Bar Blog Seperti Youtube
Snippet
Berkaitan dengan itu pada kesempatan kali ini saya akan membuatkan tutorial cara membuat progress loading bar blog kita bisa seperti di tampilan youtube tersebut, Progress Loading Bar ini nantinya akan muncul setiap anda membuka halaman pada blog seperti gambar di bawah ini.
Membuat Progress Loading Bar Blog Seperti Youtube
Anda bisa lihat di gambar gif tersebut, terlihat garis merah di bagian bar atas saat memuat halaman youtube, itulah contoh untuk demonya.
1. Buka Blogger > Pilih Template > Edit HTML > Lalu salin dan tambahkan kode dibawah ini tepat di atas 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||"#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>Keterangan :
height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.
Sekian untuk tutorial Cara Membuat Progress Loading Bar Blog Seperti Youtube. Semoga bermanfaat.