Cara Membuat Loading Bar Blog Mirip Youtube

Cara Membuat Loading Bar Blog Mirip Youtube

Selamat Malam ..
Kali ini BlogDroid9 akan membagikan tutorial Cara Membuat Loading Bar Blog Mirip Youtube. sebenarnya cara ini telah banyak yang share, tetapi karena mungkin kalian belum tau keyword yang ingin dimaksud, dan sudah terlanjur visit blog ini, maka sekalian juga baca artikel ini sampai tuntas, dijamin blog tambah cakep :) seperti admin

Tutorial ini saya dapatkan dari Kompi Ajaib yang sudah berlalu lalang dalam dunia blogging. web tersebut banyak sekali membagikan template dan tutorial-tutorial keren seperti tutorial ini. untuk contohnya saya akan memberikan animasinya dibawah ini.

Cara Membuat Loading Bar Blog Mirip Youtube

Tanpa basa-basi lagi, langsung saja kita ke tutorial cara pemasangannya ..

Cara Pemasangan Loading Bar Youtube

1. Login ke Blogger
2. Lalu silahkan menuju ke Dasboard Blog yang ingin di eksekusi > Template > Edit HTML
3. Silahkan cari tag atau kode </body> lalu silahkan copas kode dibawah ini dan letakkan diatas tag atau kode </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>

4. Save Template :)

Keterangan ;

• Ganti kode yang sudah ditandai warna biru (Untuk Mengatur Ketebalan Loading Bar)
• Ganti kode yang sudah ditandai warna merah (Untuk Mengatur Warna Loading Bar) Silahkan sesuaikan keinginan

Mudah kan? cara pemasangannya pun simple. saya yakin kalian semua bisa menerapkan pada blog kalian masing-masing.

• DEMO

Kalian pasti dapat melihat loading bar mirip youtube tersebut, jika kalian jeli! penempatan tersebut ada diatas, atau dibawah address bar browser.

Mungkin sekian dulu artikel dari Cara Membuat Loading Bar Blog Mirip Youtube, jika ada kesalahan penulisan tolong dikoreksi lalu beritahu saya melalui form komentar artikel ini.

"Luangkan Waktu Kalian 5Menit Saja Untuk Klik Iklan Pop Up Blog ini, Lalu Daftarkan Diri Kalian Agar Kita Sama-sama Mendapatkan Keuntungan Dari Blogging"

Terima Kasih Atas Kunjungannya ^_^