Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube - TRIK SIMPLE
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.

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.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe