Halaman

    Social Items

Cara Membuat Countdown Flash Sale Toko Online

Jika kamu memiliki toko online atau online shop yang akan mengadakan promo flash sale, fitur ini wajib banget kamu pakai untuk website kamu, cara membuatnyapun cukup mudah.

Manfaat memiliki fitur Flash Sale ini di web kamu selain menarik pengunjung adalah, customer mu jadi lebih tertarik untuk menunggu promo yang kamu buat, dan membuat mereka jadi berlomba-lomba untuk bersaing supaya tidak kelewatan promonya.

Jika kamu tertarik menggunakan Countdown Flash Sale Toko Online, langsung aja ikutin cara di bawah ini

Cara Membuat Countdown Flash Sale Toko Online


1. Log in Blogger atau website kamu -> Tema -> Edit HTML -> cari kode ]]></b:skin> atau kode </style> -> salin kode di bawah ini tepat di atas kode tersebut.


@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')
}
.countdown {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.countdown .countdown_text {
  display: block;
}
#time {
  font-family: Roboto, sans-serif;
  font-size: 40px;
  font-weight: 700;
  vertical-align: middle;
}

2. Selanjutnya cari kode </body> -> Salin kode di bawah ini tepat di atas kode tersebut.

<script>
//<![CDATA[
function startTimer(duration, display) {
  var timer = duration, hours, minutes, seconds;
  setInterval(function() {
    hours = parseInt(timer / 3600, 10);
    minutes = parseInt(timer % 3600 / 60, 10);
    seconds = parseInt(timer % 60, 10);

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = hours + ":" + minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 60,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};
//]]>
</script>

3. Simpan Tema

Cara Menerapkannya

Silahkan kamu salin kode di bawah ini pada entri atau halaman statis kamu, bisa juga untuk widget yah

<div class="countdown">
  <span class="countdown_text">Registration closes in</span>
  <span id="time">01:00:00</span>
  <span>minutes!</span>
</div>

Sumber :www.kompiajaib.com
Designed by Iconicbestiary

Cara Membuat Countdown Flash Sale Toko Online

Cara Membuat Countdown Flash Sale Toko Online

Jika kamu memiliki toko online atau online shop yang akan mengadakan promo flash sale, fitur ini wajib banget kamu pakai untuk website kamu, cara membuatnyapun cukup mudah.

Manfaat memiliki fitur Flash Sale ini di web kamu selain menarik pengunjung adalah, customer mu jadi lebih tertarik untuk menunggu promo yang kamu buat, dan membuat mereka jadi berlomba-lomba untuk bersaing supaya tidak kelewatan promonya.

Jika kamu tertarik menggunakan Countdown Flash Sale Toko Online, langsung aja ikutin cara di bawah ini

Cara Membuat Countdown Flash Sale Toko Online


1. Log in Blogger atau website kamu -> Tema -> Edit HTML -> cari kode ]]></b:skin> atau kode </style> -> salin kode di bawah ini tepat di atas kode tersebut.


@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')
}
.countdown {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.countdown .countdown_text {
  display: block;
}
#time {
  font-family: Roboto, sans-serif;
  font-size: 40px;
  font-weight: 700;
  vertical-align: middle;
}

2. Selanjutnya cari kode </body> -> Salin kode di bawah ini tepat di atas kode tersebut.

<script>
//<![CDATA[
function startTimer(duration, display) {
  var timer = duration, hours, minutes, seconds;
  setInterval(function() {
    hours = parseInt(timer / 3600, 10);
    minutes = parseInt(timer % 3600 / 60, 10);
    seconds = parseInt(timer % 60, 10);

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = hours + ":" + minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 60,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};
//]]>
</script>

3. Simpan Tema

Cara Menerapkannya

Silahkan kamu salin kode di bawah ini pada entri atau halaman statis kamu, bisa juga untuk widget yah

<div class="countdown">
  <span class="countdown_text">Registration closes in</span>
  <span id="time">01:00:00</span>
  <span>minutes!</span>
</div>

Sumber :www.kompiajaib.com
Designed by Iconicbestiary