Membuat Youtube Style Progress Loading Bar Pada Blog

Membuat Youtube Style Progress Loading Bar Pada Blog


Pada postingan kali ini, saya akan membagikan tutorial Membuat Youtube Style Progress Loading Bar Pada Blog untuk mempercantik tampilan blog sahabat.

Sesuai namanya, progress loading bar ini seperti pada loading youtube yang terletak di atas blog sahabat, menurut saya, progress loading bar ini sangat cocok bagi blog yang dikhususkan untuk blog yang berisi video, tidak terkecuali bagi blog yang berisi konten lainnya. Agar lebih jelas, silahkan sahabat lihat demonya.


Bagaimana? Tertarik untuk menggunakan progress loading bar ini? Langsung saja sahabat copy kode dibawah ini, kemudian letakkan diatas kode </body> pada setelah Edit HTML template sahabat.
 
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"5px",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||"#FF0000";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>
Sekian tutorial Membuat Youtube Style Progress Loading Bar Pada Blog semoga bermanfaat untuk mempercantik blog sahabat. 

Sumber: Kompi Ajaib

*

Posting Komentar (0)
Lebih baru Lebih lama