Cara Menciptakan Progress Loading Kafetaria Blog Keren Ibarat Youtube
Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube - Sobat niscaya yakan sudah pada tau apa itu youtube, ketika teman klik salah satu video youtube niscaya teman 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.
Baca Juga : Cara Menambahkan Rating Bintang di Setiap Postingan Blog
Cara Membuat Progress Loading Bar Blog Keren Seperti Youtube
Pertama teman masuk ke Blogger > Tema > Edit HTML copy arahan dibawah ini dan pastekan sempurna diatas arahan </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 teman tidak suka dengan warna merah teman 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.
Sumber https://www.triksimple.com/
