Ticker

6/recent/ticker-posts

Youtube Progress Loading Bar


Membuat Progress Loading Bar Blog Seperti Youtube. Jika anda ada bukak youtube ada progress loading di bahagian atas bar panjang yang berwarna merah ketika loading.Tutorial Kali ini saya akan membuat progress loading bar di blog dan untuk lebih jelas lagi bolehlah lihat demo dibawah ini dan berminat bolehlah ikuti langkah2.

 Pasang Slide Out Butang Follower

Bagaimana Untuk Tambah Youtube Progress Loading Bar  pada bawah blog



Langkah 1) Dari Blogger Dashboard, pergi Templates and klik pada Edit HTML
                     (Jangan lupa Download Copy of your template dahulu )



Langkah  2) Cari kode dibawah ini .
                      (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)

</body>



Langkah 3) Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .


<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>

Langkah 4) Klik Save templates dan lihat hasilnya.

Nota :-

  • height:"2px" untuk tebal loading bar.
  • a.bg=a.bg||"#db3131" untuk warna loading bar, ganti #db3131 dengan warna yang Anda suka.(untuk kode warna klik disini)



Semoga berjaya.....

Catat Ulasan

1 Ulasan

  1. saya atas nama BPK. SAMSUL dari MADURA ingin mengucapkan banyak terimah kasih kepada MBAH KARYO,kalau bukan karna bantuannya munkin sekaran saya sudah terlantar dan tidak pernaah terpikirkan oleh saya kalau saya sdh bisa sesukses ini dan saya tdk menyanka klau MBAH KARYO bisa sehebat ini menembuskan semua no,,jika anda ingin seperti saya silahkan hubungi MBAH KARYO no ini 082301536999 saya yakin anda tdk akan pernah menyesal klau sudah berhubungan dgn MBAH KARYO dan jgn percaya klau ada yg menggunakan pesan ini klau bukan nama BPK. SAMSUL dan bukan nama MBAH KARYO krna itu cuma palsu.m

    BalasPadam