Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Countdown Date Timer untuk Blog AMP HTML

Countdown Date Timer for AMP Blog
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...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

Posting Komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.