Cara Membuat Loading Progres Bar Di Blog

Halo gaes.. Ketemulagi dengan tegar yang paling keren di sini, tegar harap kalian semua sehat selalu ya, kalo ada yang sakit ya berobat :v masak kalian sakit mau di biarin aja :v, Oke kali ini saya akan memberikan sebuah tutorial cara membuat loading progres bar di blog kita, Apasih load progres bar itu? Itu loh yang saat kalian buka UC Browser nah loadingnya seperti itu, Lalu apa fungsinya Gar? Fungsinya ya lebih menarik aja saat kita buka lewat PC terlihat lebih keren tapi tidak membuat Blog berat. Lalu bagaimana tegar cara membuat nya?

Langkah pertama yangharus kalian lakukan adalah kalian buka terlebih dahulu dasbord blogger kalian lalu pilih Template dan Edit HTML jika sudah kalian Copy terlebih dahulu Script di bawah ini :

<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||"#007bff";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>

Jika sudah kalian Copy Script tersebut kalian Letakkan di atas kode </body> Jika sudah kalian pastkan di atas kode </body> kalian Simpan Template dan lihatlah perubahannya. Mungkin hanya itu saja artikel yang nggak jelas, Semoga bermanfaat buat kalian semua ya. 

Tweet