Cara Membuat Load Progres Bar Di Blog

Selasa, 07 November 2017

Halo gaes.. Ketemulagi dengan juragan yang paling kece di sini, juragan harap kalian semua sehat selalu ya, kalo ada yang sakit ya berobat :v masak kalian sakit mau di biarin aja :v, Oke kali ini juragan 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 juragan? Fungsinya ya lebih menarik aja saat kita buka lewat PC terlihat lebih keren tapi tidak membuat Blog berat. Lalu bagaimana juragan 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.