Cara Membuat Widget Popular Post Valid AMP

Widget Popular Post bawaan Blogger saat ini belum valid AMP.  Dibutuhkan beberapa trik agar widget popular post pada template blogger valid AMP.

Adapun caranya adalah sebagai berikut:

Langkah 1

Jika template bawaan belum memiliki widget popular post tambahkan dengan cara berikut:
Buka Dashboard Blogger >> Klik Layout >> Pada bagian sidebar klik Add New Gadget untuk menambahkan widget Popular Post yang baru >> Kemudian pilih Widget Popular Post.

Langkah 2

Klik Template >> klik Edit HTML >> Kemudian Klik Lompat ke Widget >> pilih Popular Post. Lihat gambar berikut

Cara mencari Widget Popular Post dalam Editor Template Blogger

Langkah 3

Selanjutnya hapus seluruh kode widget popular post bawaan blogger seperti terlihat dalam gambar berikut:

Hapus Widget Popular Post Bawaan Blogger

Ganti dengan kode berikut:

<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' layout='responsive' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznUJpo3zEKx1E5zoR9v5Acs7dX9Ev6nEwr6WRnHGPu4hq-TQNqJQl_Zy8hxQuFr2VkEawzc20xsiABO2vVF7oBG9Hv1FTkDfag7Z7zuxL1kUeNfpJOmtHSGJ6FrPxwSDLrQTEqFE0Isx4/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

Langkah 4

Tambahkan kode CSS berikut di antara tag <style amp-custom='amp-custom'> dan </style>

* popular post */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px}.PopularPosts .item-thumbnail{margin:0}.PopularPosts .widget-content ul{padding:0;margin-top:-7px}.PopularPosts .item-title a{text-decoration:none;font-weight:700;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s}.PopularPosts .item-title{padding-bottom:.4em}.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#e8554e}.PopularPosts img{width:100%;height:100%}.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0;padding:0 0 10px;line-height:1.3em;position:relative;border-bottom:1px solid #f1f1f1}.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:left}.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}.PopularPosts li:first-child .item-content{position:relative}.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

Selesai. Simpan Template Anda.

Catatan:
Untuk membuat widget popular post valid AMP di blogger, Anda harus memasang template yang valid AMP juga. Jika belum punya dapat di download pada link berikut ini. Siniladom Free AMP Blogspot Template