Memasang Loading Bar di Blog seperti Youtube

Sobat blogger, jika anda adalah seorang yang sering melihat sebuah video di youtube maka ketika kita membuka sebuah video, akan ada loading bar panjang berwarna merah di bagian atas (dibawah address bar). Nah, pada kesempatan kali ini Fakhrie Share akan membuatkan tutorial cara memasang loading bar di blog seperti di tampilan youtube. Bisa dibilang ini sebuah hiasan blog agar blog kita terlihat lebih keren dan epik, oke next ke tutorial memasang loading bar di blog seperti youtube.

Anda bisa lihat di gambar gif tersebut, terlihat garis merah di bagian bar atas saat progress loading youtube, itulah sampel untuk demonya. Kalian juga bisa lihat Loading Bar di Blog ini.

Membuat Progress Loading Bar Blog Seperti Youtube
1. Buka akun blogger.
2. Pilih menu template > Edit HTML
3. Lalu letakan 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>

Note :

height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.

Source : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html