Countdown Date Timer untuk Blog AMP HTML

Countdown Timer for AMP Blog - Countdown Timer berfungsi untuk menghitung mundur pada satu tanggal dan jam tertentu yang dianggap bersejarah atau penting. Baik itu berupa Hari Raya, Peringatan, Kontes SEO dll.

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


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...