Skip to main content
Ivhaa Design

follow us

Cara Membuat Loding Progress Bar Ala Youtube Di Blogger

Cara Membuat Loding Progress Bar Ala Youtube Di Blogger

Baca juga:




Cara Membuat Loding Progress Bar Ala Youtube Di Blogger - Hallo sobat blogger ketemu lagi nih dengan saya di bloh Ivhaa Network pada artikel kali ini saya akan membahas tentang bagaimana cara membuat loding progress ala youtube tutorial ini sebenarnya sudah banyak yang tau cuman ivhaa kali ini membahas nya kembali mungkin belum ada yang tau walau beberapa.

Untuk tutorial ini saya tidak memberikan kalian demonya jika kalian ingin melihat demo bisa kunjungi situs www.youtube.com atau bisa lihat gambar di bawah ini.



Jika kalian tertarik dengan tutorial ini simak artikel ini sampai selesai ya sobat blogger.

Cara Membuat Loding Progress Ala Youtube

  1. Pasti kalian harus login dulu ke akun blogger kalian yaitu https://www.blogger.com
  2. Kemudian pilih menu Template > Edit HTML
  3. Copy script di bawah ini di taruh di atas </body>
 <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>

Nah itu tadi tutorial yang saya sampaikan yaitu Cara Membuat Loding Progress Ala Youtube
height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.
Tapi di blogger sekarang sering mengubah judul artikel ini agar mereka seolah membuat script sebenarnya tapi yang asli judul di google atau di mana pun ya ini


You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar