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

Share:

G+1

Howdy, I'm @ridhomfirdaus

Seorang blogger, designer serta founder incsomnia, sebuah jasa pembuatan design dan website. Berstatus sebagai mahasiswa Jurusan KPI UIN Bandung dan dewan redaksi majalah jurusan yaitu Dejavu Magazine. Terimakasih atas kunjungan sahabat di blog sederhana ini. Silahkan simpan link website/blog sahabat atau mengisi buku tamu di sini agar bisa saling bersilaturahim. Terimakasih.
tukar link Guestbook

0 komentar:

Posting Komentar

 
Back to Top