Cara Membuat Loading Progress Bar Di Blogger

Cara Membuat Loading Progress Bar Di Blogger Keren -  Progress Bar Adalah Salah Satu Loading Yang Pernah Atau Sempat Di Pakai Di Website Yang Sudah Tidak Asing Lagi Yaitu Youtube Cara Kerja Progress Bar Ini Pun Sangat Menarik. Karna Dengan Adanya Progress bar Blogger Kita Akan Semakin Menarik Dengan Adanya Loading Di Bawah Url .. Nah Untuk Cara Kerja Progress Bar Ini Sangat Mudah .. Dan Cara Menerapkan Di Blogger Pun Sangat Mudah ... Oleh Sebab Itu Mari Kita Membahas Atau Mempelajari Cara Membuat Progress Bar Di Blogger ...


Nampak Sangat Elegan Blogger Kita Apabila Di Pasang Progress Bar .. Langsung Saja Ke Tutorial Nya Cara Membuat Progress Bar Keren  Di Blogger 


  1. Masuk Ke Blogger > Template > Edit Html > Cari Kode </body>
  2. Letakan kode Di Bawah Ini Sebelum Kode </body>
  3. <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||"#003333";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>
    Catatan : Untuk Merubah Warna Kalian Bisa Cari #003333 Dan Ganti Warna Sesuai Yang Kalian Inginkan .. Dan Untuk Mengubah Besar Kecilnya Progress Bar Kalian Bisa Menyesuaikan Ukuran Dengan Mencari Atau Mengubah Kode 2px 
    Demo

Belum ada Komentar untuk "Cara Membuat Loading Progress Bar Di Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel