Membuat Loading Bar Progress Ala Youtube Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi cara tentang menambahkan loading bar progress ala youtube di blog, untuk menambahkannya Anda harus mengikuti beberapa langkah berikut;

Langkah

1. Login blog Anda masing - masing,

2. Masuk menu template, edit html,

3. Lalu, cari kode </body> dengan cara

Ctrl

+

F

,

4. Copy script di bawah ini, lalu paste tepat di atas kode </body>,

 <script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"5px",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> 

Sesuaikan script sesuai dengan kebutuhan blog Anda!

5. Simpan.

Referensi Kode : https://www.facebook.com/groups/bloggercodes/

Nah, semoga artikel ini membantu dan bermanfaat, jangan lupa like, share dan google+nya serta komentar Anda, terima kasih.

Share this