Membuat Loading Blog Seperti di Youtube

Versi Loading Blog Seperti di Youtube – Efek loading blog adalah salah satu tools untuk mempercantik blog di mata pengunjung, bukan di mata google yaa. Ada banyak jenis versi loading yang akan kita jumpai di mesin pencari google, tapi efek loading satu ini yang begitu menarik bagi saya, dan mungkin juga sudah cukup familiar di benak anda.

Jika anda sering menonton video di youtube maka akan menemui efek loading yang saya maksud, efek loading tersebuk muncul ketika sesaat kita membuka/mengklik sebuah video di youtube. Efek loading tersebut tampak pada bagian bar (atas) situs Youtube.

Versi Loading Blog Seperti di Youtube

Nah, jika berminat memasang efek loading ini, guna mempercantik tampilan blog disaat seseorang membuka artikel di blog anda, maka silahkan memasang efek loading ini. Pemasagannya cukup gampang, silahkan ikuti caranya berikut ini.

Membuat efek loading blog seperti di Youtube

Seperti biasa, anda harus masuk ke Blogger > Template > Edit HTML, setelah itu kopi kode di bawah ini dan letakkan di atas </body>
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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||"#df0d0d";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>
Lalu klik simpan template, cukup mudah bukan?

Script untuk membuat loading blog seperti di YouTube sudah dibuktikan kebenarannya, jadi tidak perlu khawatir lagi untuk di pasang di template anda, karena pasti working dan ada embel-ebelnya juga yaitu valid HTML5. Semoga berhasil.

ttp://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html

1 komentar

  1. Profil:https://www.blogger.com/profile/17707201410320839132
    Sudah saya pakai di blog saya. Works great! Thank You!
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan diluar artikel silahkan buat topik baru di .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code