-->

Cara Memasang Loading Progress Bar di Blog

Dwi Purwanto -  Hallo Sobat , sudah lama gak buat artikel nih. Pada kesempatan kali ini kita akan membahas tentang bagaimana cara membuat load Progress  bar di Blog . Load progres bar merupakan loading seperti garis kecil itu lo sobat. Kamu bisa melihat seperti apa Load progres bar jika sobat membuka UC Browser atau Google Chrome di hp Android sobat . Baiklah , beginilah cara membuat Loading Progress  bar di Blog .

Baca juga : Geometri Dimensi Dua: Sudut-sudut Dalam Segi Banyak Beraturan

Cara Memasang Loading Progres Bar di Blog
Load Progres Bar di Blog 

Cara Membuat Loading Progress  Bar di Blog


1. Pertama-tama buka Blogger sobat
2. Klik Template
3. Kemudian buka edit HTML
4. Salin script di bawa 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>

5. Tempelkan atau paste script di atas di atas kode </body>
6. Yang terakhir adalah terapkan ke Template Blogger sobat

Baca juga : Geometri Dimensi Dua :Satuan Ukuran Sudut Dalam Radian

Demikian artikel yang gak jelas ini sobat . Fungsi dari pembuatan Loading Progress  Bar di Blog ini adalah untuk membuat Loading Blog terlihat lebih keren di banding sebelumnya . Ini tidak akan memengaruhi kecepatan Loading Blog sobat . 

Atas

Tengah 1

Tengah 2

Bawah