Cara Membuat Loading Progress Bar Seperti Youtube di Blog

Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat loading progress bar seperti youtube diblog. Jika kamu sering membuka youtube kamu pasti pernah melihat ada sebuah loading berwarna merah diatas menu pencarian youtube tersebut, Nah disini saya akan membagikan tutorial seperti itu.

Walaupun pengunjung blog jarang memperhatikan adanya loading progress bar seperti youtube diblog kamu, tentunya fitur loading progressbar ini dapat memperindah tampilan loading blog kamu dan terlihat beda dari blog biasanya.

Untuk Demo loading progress bar seperti youtube ini dapat kamu lihat langsung diyoutubenya, yuk langsung saja bagaimana cara membuat fitur loading progress bar seperti youtube diblog.

Cara Membuat Loading Progress Bar Seperti Youtube di Blogger

1. Pertama, login terlebih dahulu ke Blogger,
2. Kemudian, pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Lalu, copy kode Javascript dibawah ini dan letakkan tepat diatas 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||"#b50000";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>

Perhatikan kode yang saya beri highlighter gradient, silahkan Atur height:"2px" sesuai keinginan dan atur juga warna loading progress bar #b50000  sesuai keinginan.

4. Terakhir simpan atau save template tersebut.

Akhir Kata
Sekian tutorial membuat progress bar seperti youtube di blogger yang dapat saya bagikan untuk kamu, semoga dengan adanya tutorial ini dapat memperindah blog kamu dan terlihat lebih beda ketimbang blog biasanya, dan Semoga Bermanfaat :D