Cara Membuat Progress Loading Bar Youtube di Blog - Hallo sob kembali lagi dengan Fariz setelah 2 hari Fariz vakum karena sibuk dan tidak ada ide untuk membuat Postingan akhirnya Fariz kembali :D . Kali ini Fariz akan memberi Widget Cara Membuat Progress Loading Bar Youtube di Blog. Jika sobat Penikmat Youtube. Pasti disaat Loading akan ada Progress Loading Bar yang ada di Paling atas berwarna merah jika sobat tidak tahu itu apa Itu adalah Loading Bar yang ada di Youtube. Di blog Fariz juga Menggunakan Loading Bar ini yang berada di Paling atas berwarna merah. Oke berikut adalah Tutorial atau Widget, Cara Membuat Progress Loading Bar Youtube di Blog.

Sumber Madamvia

Cara Membuat Progress Loading Bar Youtube di Blog

1. Sobat Login dulu di Blogger dengan akun Gmail sobat dan Akan langsung ke Dashboard.
2. Lalu sobat Cari dan Klik Menu Template > Edit HTML.
3. Lalu sobat Letakan kode dibawah ini Diatas 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>

4. Sobat bisa Menukar kode
height:"2px" = Dengan Ketebalan Garis Loading Bar.
"#db3131" = Sobat bisa Menukar kodenya dengan Kode Warna Terserah sobat.

5. Dan sobat klik Simpan Template.

Itulah Tutorial atau Widget singkat Fariz tentang Cara Membuat Progress Loading Bar Youtube di Blog Semoga Bermanfaat Bagi sobat. Akhir Kata