Cara Membuat Widget Popular Post Valid AMP

Info informasi Cara Membuat Widget Popular Post Valid AMP atau artikel tentang Cara Membuat Widget Popular Post Valid AMP ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

Demikian artikel tentang Cara Membuat Widget Popular Post Valid AMP ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Widget Popular Post Valid AMP ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik