Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / AMP Tutorial / Css

Cara Menciptakan Coundown Waktu Di Blog 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

Untuk menciptakan Coundown Timer, anda perlu mencopy amp-date-countdown dan amp-mustache element  berikut ini sebelum tag penutup  </head>

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

<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 mempunyai kegunaan untuk menyetel tanggal berakhirnya countdown. Kunjungi https://www.epochconverter.com/ untuk merubah tanggal menjadi timestamp code. Kemudian ganti tanda kuning diatas dengan timestamp tersebut.

Untuk memperindah tampilan, aku sudah menyiapkan CSS ini, paste CSS di bawah ini diantara style amp-custom :
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 }

Demo

Berikut demo Countdown Timer sederhana yang aku buat di JSfiddle
Semoga bermanfaat ya :)