Cara Mudah Membuat Efek Loading Simple Pada Blogspot

Cara Membuat Efek Loading Simple Pada Blog - Halo semuanya, pagi ini saya akan membagikan tutorial cara simple membuat efek loading pada blog, sebelumnya saya sudah share template manga gratis yaitu Manga-sub template Blogger.

sebenarnya saya pengen menamai tutorial kali ini dengan Cara Membuat Efek Loading Seperti Youtube, namun youtube sudah tidak memakai fitur ini lagi seperti yang kalian tau. Ok kita mulai saja tutorial kali ini.

Cara Membuat Efek Loading Simple Pada Blog

1. Buka Blogger > Template > Edit HTML, salin kode dibawah ini dan simpan diatas </head> atau diatas </body>

<script type='text/javascript'>
//<![CDATA[
var loader = 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 || "#2e51a2";
    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 loader = new loader();
loader.go(30);
loader.go(60);
loader.go(100);
//]]>
</script>

Untuk mengganti warna silahkan kalian ganti yang sudah saya tandai. Sekian tutorial kali ini semoga bermanfaat.