Cara Menciptakan Progress Loading Kafe Blog Keren Menyerupai Youtube

Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube - Sobat niscaya yakan sudah pada tau apa itu youtube, ketika sahabat klik salah satu video youtube niscaya sahabat akan melihat progress loading yang berwarna merah bener nggak? Nah pada kesempatan kali ini aku akan share bagaimana caranya memasang progress loading kafetaria menyerupai youtube. Oke eksklusif saja kecaranya saja ya sob.

Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube

Pertama sahabat masuk ke Blogger > Tema > Edit HTML copy aba-aba dibawah ini dan pastekan sempurna diatas aba-aba </body> atau </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>

Perhatian! Jika sahabat tidak suka dengan warna merah sahabat juga dapat mengganti warnanya sob

Jika sudah klik simpan.

Oke sekian yang dapat aku sampaikan tentang Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube Terima Kasih yang sudah berkunjung agar bermanfaat bagi kalian semua.