Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah

Halo semua, pada artikel saya kali ini saya akan membahas tentang Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah

Bantu saya untuk mengembangkan website saya dengan meninggalkan Komentar

Yuk, simak langsung saja di bawah ini.

Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah

Berikut Bagaimana Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah:

1. Pertama - tama Buka Blogger > Template > Edit HTML, Salin dan simpan HTML berikut ini tepat di atas kode </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>

2. Save Template

Untuk mengganti Warna Harap diganti pada Kode diatas yang sudah saya tandai

BisaKompu

Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah

Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah

Berikut Bagaimana Tutorial Cara Membuat Efek Loading Simple di Blog dengan Mudah:

Share this