Cara Membuat Loding Progress Bar Ala Youtube Di Blogger




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


Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser