Template dan Tips Seputar Blogger

Monday, June 19, 2017

Memasang Loading Blog Seperti di Youtube

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.

Memasang Loading Blog Seperti di Youtube

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[
// http://blog.iumari.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.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×