Cara Membuat Coundown Waktu di Blog AMP

Countdown Timer , biasa ditampilkan pada sebuah website, untuk menandai waktu peluncuran sebuah event. Untuk menampilkan countdown ini, Webmaster harus membuat sebuah javascript yang memanfaatkan timestamp, dan ditanam dalam Dom HTML website tersebut.

Namun, bisakah sebuah Time Countdown diterapkan pada sebuah halaman AMP? Bisakah Countdown dibuat tanpa menggunakan JavaScript?

Jika tanpa menggunakan javascript, tentu saja tidak mungkin terjadi. Untuk itulah, AMP-Project telah menyiapakan element JavaScript khusus AMP yang memungkinkan Webmaster menampilkan Countdown pada halaman web berbasai AMP HTML.

amp-date-countdown

AMP Project telah merilis element baru yang dinamakan amp-date-countdown, yang memungkinkan Webmaster membuat dan menampilkan sebuah Countdown Timer untuk keperluan websitenya.

Untuk menampilknya, Webmaster cukup menempelkan elemen amp-date-countdown di dalam tag <head>, dan bisa memanfaatkan amp-mustache untuk menampilkannya.

Saya akan membagikan tutorial mengenai Cara membuat Countdown Timer pada Halaman AMP HTML lengkap dengan CSS untuk memperindah tampilannya.

Create Countdown Timer for AMP Page

Untuk membuat Coundown Timer, anda perlu mencopy amp-date-countdown dan amp-mustache element berikut ini sebelum tag penutup </head>

Kemudian, copy kode berikut ini pada tempat yang anda inginkan. kode HTML di bawah ini akan menampilkan countdown secara otomatis.

<amp-date-countdown timestamp-seconds="1576225970" layout="fixed-height" height="200">
    <template type="amp-mustache">
    <div class='until'>
        We are Open in
        </div>
      <div id="timecontainer">
        <ul class='timediv'>
          <li class='time'>
        {{d}} days
          </li>
          <li class='time'>
          {{h}} hours
          </li>
          <li class='time'>
            {{m}} minutes</li>
          <li class='time'>
            {{s}} seconds
          </li>
        </ul>
      </div>
    </template>
  </amp-date-countdown>

Anda hanya perlu menyetel timestamp-seconds (tanda kuning) yang berguna untuk menyetel tanggal berakhirnya countdown. Kunjungi https://www.epochconverter.com/ untuk merubah tanggal menjadi timestamp code. Kemudian ganti tanda kuning diatas dengan timestamp tersebut.

Untuk memperindah tampilan, saya sudah menyiapkan CSS ini, paste CSS di bawah ini diantara style amp-custom :
amp-date-countdown {

      display: block;
    }
#timecontainer {
    background:#2c3e50;
    padding:10px;15px;
    display:block;
    text-align:center;
    font-size:24px;
    max-width:800px;
      margin:auto;
      width:100%;
  }
ul.timediv {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
        color:#444;
}

li.time {
display:inline-block;
  padding:10px 15px;
  background:#f9f9f9;
  color:#000
}

Demo

Berikut demo Countdown Timer sederhana yang saya buat di JSfiddle

Semoga bermanfaat ya :)