Memasang Loading Blog Seperti di Youtube

Memasang Loading Blog Seperti di Youtube

Snippet

Namina Kiky

6/19/2017

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

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.

Memasang efek loading blog seperti di Youtube

Seperti biasa, anda harus masuk ke Blogger > Template > Edit HTML, setelah itu salin kode di bawah ini dan letakkan di atas </body>

<script type='text/javascript'>
//<![CDATA[
// https://www.naminakiky.com
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 memasang loading blog seperti di youtube di atas saya dapat dari blog Kompi Ajaib, jadi tidak perlu khawatir lagi untuk di pasang di template anda, karena pasti working dan ada embel-ebelnya juga yaitu valid HTML5. Semoga berhasil.

Namina Kiky