DS8gD8tqpFYp4KrtxINpCV9FEH1uV8QcSMCvROJM

Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube

Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube

Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube - Sobat pasti yakan sudah pada tau apa itu youtube, saat sobat klik salah satu video youtube pasti sobat akan melihat progress loading yang berwarna merah bener nggak? Nah pada kesempatan kali ini saya akan share bagaimana caranya memasang progress loading bar seperti youtube. Oke langsung saja kecaranya saja ya sob.

Baca Juga : Cara Menambahkan Rating Bintang di Setiap Postingan Blog

Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube


Pertama sobat masuk ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;.

<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 sobat tidak suka dengan warna merah sobat juga bisa mengganti warnanya sob

Jika sudah klik simpan.

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Related Posts
Raja Impian
Kopi Inspirasi

Related Posts

Post a Comment