Cara Menciptakan Progress Loading Kafe Blog Keren Ibarat 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 kafe menyerupai youtube. Oke pribadi 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 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 supaya bermanfaat bagi kalian semua.
Sumber https://www.triksimple.com/