Cara Membuat Progress Loading Bar Blog seperti YouTube

May 25, 2016
Cara Membuat Progress Loading Bar Blog seperti YouTube - Sudah ada yang pernah lihat progress loading bar YouTube belum? Ya, mungkin sudah ya. Karena secara gitu lho YouTube mesin pencari terbesar didunia ke dua, Masak belum tau???

Progress Loading Bar Blog seperti YouTube


Progress Loading Bar Blog seperti YouTube ini itu cukup keren dan bisa jadi aksesoris kecil yang tidak akan mempengaruhi loading kecepatan blog. Gimana caranya? Langsung aja yuk!

Cara Membuat Progress Loading Bar Blog seperti YouTube

Pertama Buka Blogger > Template > Edit HTML > Salin dan Paste kode di kotak kode bawah ini dan sisipkan tepat di salah satu kode berikut : ]]></b:skin> atau </style>



<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||"#db3131";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>

Kostumasi : height:"2px" untuk ketebalan loading bar. a.bg=a.bg||"#db3131" untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai. Code Source: http://nanobar.micronube.com/

SIMPAN TEMPLATE!

Terimakasih. Semoga bermanfaat.
Share this with short URL: Get Short URLloading short url

Share this


Artikel Menarik Lainnya

Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Contact Form

Name

Email *

Message *