GagakTekno

Cara Membuat Widget Popular Post Valid AMP

Pengalaman saya setelah berganti ke Template AMP banyak sekali Error bisa dibilang saking banyaknya saya harus belajar lagi dan lagi untuk membuat Template itu menjadi Valid AMP dikarenakan saya minim tentang AMP tapi setelah saya belajar terus akhirnya paham logika mengunakan Template AMP. Sebenarnya menggunakan AMP memang agak ribet karena cukup dibatasi berbeda dengan Template biasa yang bebas untuk dikembangkan lagi tapi untuk yang satu ini sangatlah ribet menurut saya sendiri bahkan untuk memasang Label Count saja sudah termasuk tidak valid, mungkin karena saya tidak tahu cara untuk memperbaikinya.

Nah bagi sobat yang lagi berpindah ke template seperti saya yaitu AMP sangatlah diuntungkan untuk sekarang karena Google sangat mencintai AMP jadi jangan berkecil hati jika sobat berpindah ke AMP karena siapa tahu blognya menjadi lebih bagus dari pada yang diperkirakan.

Lanjut ke permasalahan, kenapa popular post tersebut Error? dikarenakan beberapa kode atau tag tidak sempurna untuk blog AMP seperti halnya img yang harusnya menjadi amp-img dan lainnya. Maka dari itu untuk popular post kita harus merubahnya secara manual agar popular post tersebut menjadi valid amp.

Membuat Popular Post Valid AMP


  1. Pertama masuk ke bagian Dashboard blog sobat
  2. Selanjutnya Klik Tema > Klik Edit HTML
  3. Kemudian klik Lompat ke Widget > pilih Popular Post
  4. Selanjutnya hapus seluruh kode widget popular post bawaan blogger

  5. Lalu ganti dengan kode berikut
  6. <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
                <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='!data:showThumbnails'>
              <b:if cond='!data:showSnippets'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
              <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:post.href' target='_blank'>
                      <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 700) : data:post.thumbnail' var='image'>
                        <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' width='280'/> 
                      </b:with>
                    </a>
                  </div>
                  <b:else/>
                  <div class='item-thumbnail'>
                    <a expr:href='data:post.href' target='_blank'>
                  <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='70' src='//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s100/no-thumbnail.png' width='100'/>
                    </a>
                  </div>
                </b:if>
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <b:if cond='data:showSnippets'>
                  <div class='item-snippet'><data:post.snippet/></div>
                </b:if>
              </div>
              <div class='clear'/>
            </b:if>
          </li>
          </b:loop>
        </ul>
      </div>
    </b:includable>
              </b:widget>
      Jika diperhatikan pada kode yang berwarna, ada sedikit perubahan yaitu pada ukuran gambar dari 100 menjadi 700, dan tag img menjadi amp-img
  7. Tambahkan kode CSS berikut di antara tag <style amp-custom='amp-custom'> dan </style>
  8. Lalu simpan tema/template
Untuk melakukan mengecek apakah sudah Valid AMP atau tidaknya sobat bisa langsung ke Validator AMP dan silahkan cek template sobat maka hasilnya akan valid amp tidak error.
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR