Membuat Popular Post Carousel di Amp Template

Langkah Pertama

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

Langkah Kedua

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>

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>

Dan 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'/>

Copas dari : http://www.kompiajaib.com/2017/03/carousel-blogger-popular-posts-with.html