Cara Membuat Widget Popular Post Valid AMP - Hallo sahabat Ponsel Ajaib, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Widget Popular Post Valid AMP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel amp-html, Artikel blogspot, Artikel tips-trik, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Widget Popular Post Valid AMP
link : Cara Membuat Widget Popular Post Valid AMP

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/AVvXsEgCIsr0qfjgqdKsPPPzdemq-H4SczJU9uXnoCz4rPG8qCXBqLXrT6NhtlpJU4jyWOvFp4okq4-jJ_U3JlFoTFPedyDW3A2832T-gqAItYEYa9n5dYhCuIkQQHvzrbS_eIGhDLP5YuwWAd71/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

Demikianlah Artikel Cara Membuat Widget Popular Post Valid AMP

Sekianlah artikel Cara Membuat Widget Popular Post Valid AMP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Widget Popular Post Valid AMP dengan alamat link http://ponsel-ajaib.blogspot.com/2016/10/cara-membuat-widget-popular-post-valid.html