Tuesday, December 27, 2016
Cara membuat Progress Bar Seperti Di You Tube
Cara membuat Progress Bar Seperti Di You Tube
Sore Semua Saya Ingin Memberi Sedikit Informasi Untuk anda tentu nya buat para pecinta blog alias blogger :D
Membuat Progress Loading Bar Blog Seperti Youtube. Sobat blogger, jika anda adalah SEOrang yang sering melihat sebuah video di youtube maka ketika kita membuka salah satu video, akan ada progress loading di bagian atas bar panjang berwarna merah, dan untuk sebuah loading..cukup keren bukan hehe, nah pada kesempatan kali ini saya akan membuatkan tutorial cara membuat progress loading bar blog kita bisa seperti di tampilan youtube tersebut, bisa dibilang ini sebuah hiasan blog agar blog kita terlihat lebih keren dan cantik, oke next ke tutorial membuat progress loading bar blog seperti di youtube.

Anda bisa lihat di gambar gif tersebut, terlihat garis merah di bagian bar atas saat progress loading youtube, itulah sample untuk demonya.
height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.
Sekian tutorial di "Cara Membuat Progress Loading Bar Blog Seperti Youtube" semoga bermanfaat.
Membuat Progress Loading Bar Blog Seperti Youtube. Sobat blogger, jika anda adalah SEOrang yang sering melihat sebuah video di youtube maka ketika kita membuka salah satu video, akan ada progress loading di bagian atas bar panjang berwarna merah, dan untuk sebuah loading..cukup keren bukan hehe, nah pada kesempatan kali ini saya akan membuatkan tutorial cara membuat progress loading bar blog kita bisa seperti di tampilan youtube tersebut, bisa dibilang ini sebuah hiasan blog agar blog kita terlihat lebih keren dan cantik, oke next ke tutorial membuat progress loading bar blog seperti di youtube.

Anda bisa lihat di gambar gif tersebut, terlihat garis merah di bagian bar atas saat progress loading youtube, itulah sample untuk demonya.
Membuat Progress Loading Bar Blog Seperti Youtube
1. Buka akun blogger.
2. Pilih menu template > Edit HTML
3. Lalu letakan kode dibawah ini tepat di atas kode </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>
height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.
Sekian tutorial di "Cara Membuat Progress Loading Bar Blog Seperti Youtube" semoga bermanfaat.
Go to link Download