Countdown Timer dengan menggunakan pure JavaScript telah saya bagikan 8 tahun lalu, pada postingan Membuat Countdown Timer Tahun Baru 2014. Sedangkan pada Blog AMP tentunya tidak diperbolehkan menggunakan JavaScript seperti itu.
Langkah pertama, sobat harus memasukan JavaScript amp-date-countdown di blog
<script async="async" custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"/>
Kemudian tambahkan juga JavaScript amp-mustache<script async="async" custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"/>Kode CSS yang bisa diganti sesuka hati
.countdown-container{background:#00ecb9;margin:0 auto;font-size:16px;padding:10px 10px 20px 10px;text-align:center;font-family:Arial, sans-serif}
.countdown {display:flex;margin:0 auto;padding:10px;}
.blok1 {width:25%;text-align:center;font-size:14px;background:#00bf96;color:#fff;font-weight:400;padding:8px;text-transform:capitalize;border-radius:10px;margin:5px}
.blok2{display:block;padding:10px;color:#fff;background:#00816a;border-radius:10px;font-size:25px;margin-bottom:8px}
.teks-blok {display:inline-block;color:#006351;font-size:20px;font-weight:600;margin:0}
Simpan Kode HTML ini diposisi yang disuka, baik di Widget atau Postingan
<amp-date-countdown end-date="2021-04-13T00:00+07:00"
locale="id"
layout="fixed-height"
height="250">
<template type="amp-mustache">
<div class="countdown-container">
<div class="countdown">
<div class="blok1">
<div class="blok2">{{d}}</div>
Hari
</div>
<div class="blok1">
<div class="blok2">{{h}}</div>
Jam
</div>
<div class="blok1">
<div class="blok2">{{m}} </div>
Menit
</div>
<div class="blok1">
<div class="blok2">{{s}} </div>
Detik
</div>
</div>
<div class="teks-blok">Menuju Ramadhan 1442 H</div>
</div>
</template>
</amp-date-countdown>
Untuk DEMO di bawah ini saya menggunakan Countdown Date Timer untuk Tahun Baru 2022
{{d}}
Hari
{{h}}
Jam
{{m}}
Menit
{{s}}
Detik
Menuju Tahun Baru 2022
Apabila ingin menentukan tanggal yang lain, tentukan pada code
end-date
dengan format ISO 8601, untuk menetukannya simak penjelasan di bawah ini.Sekilas tentang ISO 8601
Untuk menentukan batas waktu pada Countdown ini, harus menggunakan
end-date
dan penanggalan menggunakan ISO 8601 Date Time Stamp.end-date="YYYY-MM-DDThh:mm:ssTZD"
YYYY = Year (Menunjukkan Tahun), ditulis 4 digit
MM = Month (Menunjukkan Bulan), ditulis 2 digit (contoh: 01 adalah bulan Januari)
DD = Day (Menunjukkan Hari atau tepatnya tanggal), ditulis 2 digit
T = Time (menunjukkan Waktu). Harus ditulis dengan huruf kapital (bukannya "t"). Keterangan ini dapat diganti dengan spasi. Jika ditulis, maka keterangan waktu harus ditulis dengan format berikut:
hh = hours (menunjukkan Jam), ditulis dengan format 24 jam (contoh: 22 adalah jam 10 malam)
mm = minutes (menunjukkan Menit), ditulis 2 digit
ss = seconds (menunjukkan detik), ditulis 2 digit
TZD = Time Zone Designator (menunjukkan zona waktu), contohnya: zona waktu Indonesia Bagian Barat (WIB) adalah +07:00, atau ditambah 7 jam (UTC+07:00)
Jadi
end-date="2021-04-13T00:00+07:00"
artinya adalah Jam 12 Malam WIB tanggal 13 bulan April tahun 2021. Untuk WIT atau WITA silahkan ditambah jamnya. Contoh lain misalkan sobat akan membuat Countdown Timer Awal Imsak jam 3 lewat seperempat WITA, tanggal 13 April 2021 maka kodenya end-date="2021-04-13T03:15+08:00"
Masih bingung? ngobrol yu di kolom komentar...