Cara Memasang Loading Progress Bar di Blog
09 Desember 2017
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
Baca juga : Geometri Dimensi Dua: Sudut-sudut Dalam Segi Banyak Beraturan
 |
| 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
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 .