Cara Mudah Buat Loading Bar Pada Blog Seperti YouTube

Setelah sebelumnya saya sudah membagikan pengalaman saya tentang cara mendaftarkan blog dan mensumbit sitemap ke Google Webmaster Tools, pada kesempatan ini saya akan membagikan cara mudah buat loading bar pada blog seperti YouTube. Tentu bagi anda yang suka menonton video streaming di YouTube pasti anda sering melihat loading bar miliknya, yaitu garis merah di bawah kolom adress bar, garis merah loading tersebut akan muncul saat anda berganti video atau sedang mencari video, cukup elegan dan menarik bukan?

Nah jika anda tertarik untuk menambahkan loading bar seperti miliknya YouTube pada blog anda, anda bisa mengikuti langkah-langkah mudahnya di bawah ini. Kebetulan pada blog Sophiasa juga saya sudah menerapkannya, jika anda ingin melihatnya silahkan anda berpindah artikel, kemudian perhatikan loading bar-nya, namun saya sudah mengganti warnanya dengan warna biru agar sesuai dengan warna template yang sedang saya gunakan.

Berikut ini cara mudah buat loading bar pada blog seperti YouTube :

1. Silahkan anda login ke akun blogger milik anda
2. Pada dashboard blog silahkan pilih menu Template lalu pilih Edit HTML
3. Selanjutnya silahkan anda cari kode </body> silahkan gunakan Ctrl + F untuk memudahkan pencarian
4. Jika sudah ketemu silahkan pastekan kode di bawah ini tepat di atasnya

<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>

5. Silahkan simpan template
6. Selesai.

Keterangan : height:"2px"height:"2px" (Untuk ketebalan garis loading bar) dan a.bg=a.bg||"#db3131"  (Untuk warna garis loading bar, silahkan anda ganti kode #db3131 dengan warna sesuai dengan selera anda)

Nah sekarang blog anda sudah memiliki loading bar yang keren dan elegan. Selamat mempraktekan dan semoga bermanfaat.