Cara Menciptakan Coundown Waktu Di Blog Vaild Amp
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 menciptakan sebuah javascript yang memanfaatkan timestamp, dan ditanam dalam Dom HTML website tersebut.Namun, bisakah sebuah Time Countdown diterapkan pada sebuah halaman AMP? Bisakah Countdown dibentuk tanpa memakai JavaScript?
Jika tanpa memakai javascript, tentu saja mustahil 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 gres yang dinamakan amp-date-countdown, yang memungkinkan Webmaster menciptakan dan menampilkan sebuah Countdown Timer untuk keperluan websitenya.
Untuk menampilknya, Webmaster cukup menempelkan elemen amp-date-countdown di dalam tag <head>, dan dapat memanfaatkan amp-mustache untuk menampilkannya.
Saya akan membagikan tutorial mengenai Cara menciptakan Countdown Timer pada Halaman AMP HTML lengkap dengan CSS untuk memperindah tampilannya.
Create Countdown Timer for AMP Page
<script async='' custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script> <script async='' custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Kemudian, copy arahan berikut ini pada kawasan yang anda inginkan. arahan HTML di bawah ini akan menampilkan countdown secara otomatis.
Untuk memperindah tampilan, aku sudah menyiapkan CSS ini, paste CSS di bawah ini diantara style amp-custom :
Berikut demo Countdown Timer sederhana yang aku buat di JSfiddle
<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 berkhasiat untuk menyetel tanggal berakhirnya countdown. Kunjungi https://www.epochconverter.com/ untuk merubah tanggal menjadi timestamp code. Kemudian ganti tanda kuning diatas dengan timestamp tersebut.Related
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 }
DemoBerikut demo Countdown Timer sederhana yang aku buat di JSfiddle
Semoga bermanfaat ya :)
Sumber https://www.merpatih.com/