Membuat Progress Loading Bar Blog Seperti Youtube
Untuk blogger juga bisa menambahkan desain seperti itu, dengan bantuan javascript, yaitu javascript nanobar, untuk masalah kecepatan loading blog mungkit tidak terlalu membebani karena ukuran jQuery nya pun hanya kecil.
Untuk kustomisasi bisa dibilang sangat mudah karena agan bisa merubah warna maupun ukuran dari nanobar tersebut, untuk reviewnya agan bisa melihat gambar gif dibawah ini
Untuk demo langsungnya agan langsung aja refresh halaman blog ini dan lihat diatas ada garis biru yang berjalan.
Oke untuk menambahkan progressbar seperti you tube ini agan hanya menambahkan code javascript ini diatas code </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>
Resource by : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html
« Newest
Newer Posts
Oldest »
Older Posts