Cara Membuat Popular Posts Efect Slide Valid AMP

Popular post adalah widget wajib dalam sebuah web, karena selain membuat tampilan web tambah menarik, popular post juga dapat membantu menambah pageview dengan syarat tampilan popular post juga harus menarik perhatian pembaca.

Nah untuk postingan kali ini kita akan membuat widget popular posts dengan memanfaatkan amp-carausel. Caranya cukup mudah, tampilan juga simpel dan menarik. Jika blog kamu ingin memasang wiget ini simak caranya berikut.

Tapi sebelum mengesekusi pastikan sudah menyimpan kode amp-caraousel seperti dibawah ini di atas </head>

<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

Cara Membuat Popular Posts Efect Slide Valid AMP
1. Tambahkan Css dibawah ini di amp-custom

.PopularPosts{background:#fff;padding:10px 30px 30px}
.PopularPosts amp-img{width:280px;height:180px;}
.PopularPosts h2{position:relative;overflow:hidden;margin:0 0 10px}
.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
.PopularPosts h2:after{content:'';display:inline-block;float:left;position:absolute;top:0;height:15px;margin:8px 0 0 0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgObQwh2E0eNYQ1rlW_eTvG76f569bQBEaEIsYiY5utxRqEGLXnL90Or9Vxd3agEIeC2VUIGoAK-u_r5-UgPHHnqq5EbvcV8fyyY5iLHMS02SRMuzkzp89TIU5w0VExZjv9zlcleiFBzq/s1600/repeat-bg.png);opacity:.9;}

2. Copy kode HTML widget popular post di bawah ini untuk di atas (di bawah header) dan bawah blog (di atas footer). Jika sudah ada widget popular post di sidebar, silahkan hapus widgetnya.

        <b:section class='carousel' id='carousel' preferred='yes'>
          <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><div><data:title/></div></h2></b:if>
  <div class='widget-content popular-posts'>
<amp-carousel height='180' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <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><a expr:href='data:post.href'><data:post.title/></a></div>
            <div><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 280)                                  : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
                  </b:with>
                </a>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel>
  </div>
</b:includable>
          </b:widget>
        </b:section>

3. Untuk menampilkan dibawah blogPost copy code dibawah ini

          <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><div><data:title/></div></h2></b:if>
  <div class='widget-content popular-posts'>
<amp-carousel height='180' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <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><a expr:href='data:post.href'><data:post.title/></a></div>
            <div><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 280)                                  : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
                  </b:with>
                </a>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel>
  </div>
</b:includable>
          </b:widget>

4. Selanjutnya Simpan dibawah kode berikut

              <b:includable id='threaded_comments' var='post'>...</b:includable>
            </b:widget>

Sampai hasilnya seperti dibawah ini

              <b:includable id='threaded_comments' var='post'>...</b:includable>
            </b:widget>
           KODE HTML POPULAR POST DI SINI
          </b:section>

5. jika ingin menampilkan Popular posts di sidebar, silahkan ganti kode yang lama dengan yang dibawah ini

          <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><div><data:title/></div></h2></b:if>
  <div class='widget-content popular-posts'>
<amp-carousel height='180' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <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><a expr:href='data:post.href'><data:post.title/></a></div>
            <div><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 280)                                  : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
                  </b:with>
                </a>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel>
  </div>
</b:includable>
          </b:widget>

6. Selesai dan silahkan lihat hasilnya