Popular Posts Pada Blog AMP Carousel

Popular posts adalah salah satu cara untuk menambah page view blog. Untuk itu perlu tampilan yang menarik pada popular posts agar menarik perhatian pembaca. Salah satu cara membuat popular posts pada blog AMP menjadi tampilan yang menarik adalah dengan memanfaatkan amp-carousel. Dengan sedikit modifikasi oleh <Kang Adhy pada kode widget popular post, maka jadilah carousel popular post yang bisa disimpan di bagian atas atau bawah blog ataupun di sidebar

Demo

jika ingin mencobanya pada blog AMP Anda, silahkan ikuti langkahnya di bawah ini.
1. Silahkan gunakan CSS di bawah ini untuk tampilan carousel popular posts.

.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/AVvXsEha6ArCjVsnvPWmD_63u8eed4G8Ol_lasvpDDNv0AF310A94k0CDqgp7oP8BwiadPoY5FG2VLZBMl_STiXhjvAuQ4JWLbkTW94Ne7g_tKjW6DtftQwdQjcXvT_MF_edChb7N0wRs_Qdatdu/s1600/repeat-bg.png);opacity:.9;}

2. Silahkah 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>

Baca juga : Tutorial Membuat Footer Dengan 4 Kolom Valid AMP

Jika ingin menampilkan di bawah Blog Posts, silahkan copy kode di bawah 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>

Kemudian simpan di bawah kode berikut

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

Sehingga penampakannya seperti berikut

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

Jika ingin menampilkan di sidebar, silahkan ganti widget popular post yang lama dengan kode di bawah 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>

3. pastikan Anda sudah menyimpan kode amp-carousel seperti di bawah ini di atas </head>

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

Sumber : www.kompiajaib.com