Membuat Progress Loading Bar Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube

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.

Membuat Progress Loading Bar Blog Seperti 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.

Source : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html

Bagikan Ke
7 Komentar untuk "Membuat Progress Loading Bar Blog Seperti Youtube"

Artikel ini memberikan wawasan terbaru buat saya, wacana pembahasan ini sangat bermanfaat.
http://jellygamatgoldg31.com/obat-herbal-maag/

ilmu yang sangat bermanfaat nih, terimakasih gan :)
http://kedaijellygamatgoldg.com

Mampur juga ke blig ane gaN
http://www.oppung com

Mampur juga ke blig ane gaN
http://www.oppung com

#BOOM udah dicoba gan Work banget hehehe ilmu baru
http://www.brofariz.xyz/

CAra buat gift seperti itu gimana mas.?

Tanks ilmu nya work :)
https://microsoftelektronika.blogspot.co.id