Home AMP BLOG Cara menggunakan amp list di blog

Cara menggunakan amp list di blog

Berikut merupakan tutorial tentang cara memanfaatkan dan menggunakan amp list di blog maupun website agar blog anda terlihat keren dan pastinya valid AMP.

Apa itu AMP LIST ?

Amp-list adalah komponen amp yang memanggil titik akhir json CORS dan menampilkan data dalam bentuk file json di dalam templat. Mari kita pahami ini dengan bantuan contoh PENGGUNAAN AMP LIST DIBAWAH INI.
Untuk bekerja dengan amp-list, kita perlu memasukkan skrip berikut -.
1. Untuk website yang menggunakan hosting sendiri gunakan kode ini : 
<script async custom-element = "amp-list" 
   src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
</script>
2. Untuk pengguna blogspot gunakan kode ini: 
<script async="" custom-element = "amp-list" 
   src = "https://cdn.ampproject.org/v0/amp-list-0.1.js" />

Ini adalah format dari tag amp-list : 
<amp-list width = "auto" height = "100" 
layout = "fixed-height" src = "amplist.json" class = "m1">
   <template type = "amp-mustache">
      <div class = "images_for_display">
         <amp-img width = "150"
            height = "100"
            alt = "{{title}}"
            src = "{{url}}">
         </amp-img>
      </div>
   </template>
</amp-list>
SRC yang digunakan untuk amp-list adalah file json yang memiliki rincian untuk dicantumkan. Kita dapat menggunakan tag html normal atau komponen amp di dalam daftar amp untuk menampilkan data dari file json. Tipe template amp-kumis digunakan untuk data yang mengikat data yang akan ditampilkan.
Mari kita pahami ini dengan bantuan contoh kerja seperti yang ditunjukkan di bawah ini - 
<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp List</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{-webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
            -webkit-animation:none;-moz-animation:none;
            -ms-animation:none;animation:none}
         </style>
      </noscript>
      
      <script async custom-element = "amp-list" 
         src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
      </script>
      
      <script async custom-template = "amp-mustache" 
         src ="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <amp-list width = "auto" height = "100" 
         layout = "fixed-height" src = "amplist.json" class = "m1">
         <template type = "amp-mustache">
            <div class = "images_for_display">
               <amp-img width = "150"
                  height = "100"
                  alt = "{{title}}"
                  src = "{{url}}">
               </amp-img>
            </div>
         </template>
      </amp-list>
   </body>
</html>
Dan jangan lupa tambahkan file json untuk kode diatas: 
{
   "items": [
      {
         "title": "Christmas Image 1",
         "url": "images/christmas1.jpg"
      },
      {
         "title": "Christmas Image 2",
         "url": "images/christmas2.jpg"
      },
      {
         "title": "Christmas Image 3",
         "url": "images/christmas3.jpg"
      },
      {
         "title": "Christmas Image 4",
         "url": "images/christmas4.jpg"
      }
   ]
}
:

Disqus Comments