Cara membuat Tampilan Loading Seperti Youtube

Selamat malam minggu semuanya,mumpung lagi rada nyantai kita akan memberikan teks javascript yaitu Cara membuat  Seperti Youtube,siapa sih yang belum pernah membuaka situs khusus video dengan segala format ini,

ezgif-1787923791

perhatikan kalau loadingnya itu di atas pasti anda akanmeliha garis merah di bar atas,nah untuk menampilkan loading kaya di youtube silahakan ikuti beberapa lankah berikut ini :

Cara Membuat Loading Blog Seperti Progress Bar YouTube
1. Login Ke akun blogger anda
2. Masuk ke menu Template danPilih Edit HTML
3. Selanjutnya letakkan kode dibawah berikut ini tepat diatas

// <![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);
// ]]>

Informasi :
height:”2px” (Ketebalan Garis Loading Bar)
a.bg=a.bg||”#db3131″ (Warna Garis, Silahkan anda ganti #db3131 dengan warna selera anda)

Save template anda dan selesai.
Silahkan anda membuka salah satu halaman blog anda dan perhatikan pada blog bar anda akan terlihat garis merah/atau warna selera anda seperti pada youtube,dan jika muncul berarti anda telah berhasil dana selesai memasangnya pada blog anda.
Semoga bermanfaat!

Iklan

Komentari

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s