Cara Memasang Countdown Timer di Blog Valid AMP

Cara memasang countdown timer di blog valid AMP. Countdown timer berfungai sebagai oenghitung mundur tanggal dan waktu. Biasanya countdown timer ini dipasang untuk menghitung mundur suatu hari hari besar yang akan diadakan suatu blog. Bisa jadi oengumuman pemenang kontes, atau hari hari penting bagi blog tersebut.

Pada dasarnya memasang countdown timer ini memerlukan javascript tambahan, nah apakah di blog valid AMP bisa memasang countdown timer ini?

Jawabannya bisa, karena disini saya sudah menyiapkan caranya tanpa harus memasang javascript yang mengakibatkan error AMP.

Cara Memasang Countdown Timer di blog AMP

Pertama silahkan anda pasang terlebih dahulu script amp-mustache dan script amp-date-countdown tepat dibawah head.

<script async="async" custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"/>

<script async="async" custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"/>

Kemudian, pasang kode di bawah ini tepat di bagian CSS blog anda.

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

Jika sudah, Langkah selanjutnya adalah memasang countdown timernya, silahkan copy HTML di bawah ini dan paste ketempat yang ingin di pasang.

<amp-date-countdown end-date="2021-03-11T00:00+05: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>

Silahkan ganti tanggal dan waktu sesuai keinginan di bagian end-date.

Terakhir save tema, sampai disini anda sudah berhasil memasang countdown timer nya.

Note : system penanggalan countdown timer ini menggunakan ISO 8601, jadi anda perlu memperhatikan petunjuk dibawah ini.

Untuk menentukan batas waktu pada Countdown ini, harus menggunakan end-date .

end-date="YYYY-MM-DDThh:mm:ssTZD"

YYYY = Year (Menunjukkan Tahun), ditulis 4 digit

MM = Month (Menunjukkan Bulan), ditulis 2 digit.

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.

mm = minutes (menunjukkan Menit), ditulis 2 digit

ss = seconds (menunjukkan detik), ditulis 2 digit

TZD = Time Zone Designator (menunjukkan zona waktu).

BACA JUGA : Cara membuat TOC valid AMP

Itulah penjelasan singkat dari saya tentang cara memasang countdown timer. Semoga artikel ini mampu di pahami, bagi yang belum paham bisa berdiskusi di forum diskusi blog ini.

www.repick.net