2 Tampilan AMP Carousel Untuk Widget Popular Post Blogger

Cara membuat Widget Popular Posts Blogger dengan Layout Carousel Slide pada HTML AMP tidak terlalu sulit jika sudah tahu bagaimana penempatan widgetnya.
pengertian dasar dari AMP Carousel adalah menampilkan beberapa konten dalam garis horizontal. dengan ini widget Popular Posts Blogger akan lebih menarik dan mudah di gunakan oleh pengunjung. ada beberapa element dasar pada AMP Carousel yang bisa di coba mana yang lebih menarik dan cocok untuk tema template web/blog.
Elemen Type Pada AMP Carousel

1. type="carousel"
2. type="slides"
3. Auto Slide <amp-carousel type="slides" autoplay delay="2000">

Basic AMP Carousel

Penerapan Layout AMP Carousel Slide pada Widget Blogger

Pastikan Script Component sudah terpasang.

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

Cara Pasang Widget Artikel Populer Dibawah Posting BLog.
Cari code berikut :

        <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>...</b:widget>
          ---------- widget baru disini ----------
        </b:section>

Jika sudah di temukan dan tahu penempatannya harus dimana.
kemudian letakan code berikut di bagian --- widget baru disini ---

1. AMP Widget Popular Post Dengan Gambar Dan Judul Artikel

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
                <h2><data:title/></h2>
            </b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:showThumbnails'>
          <!-- Show thumbnails and Title -->
            <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, 300) : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='150' width='280'/>
                  </b:with><div><data:post.title/></div>
                </a>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>

Gunakan CSS berikut atau edit jika ingin tampilan yang beda.

#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px;}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
#PopularPosts1.PopularPosts a{position:relative;}
#PopularPosts1.PopularPosts a div{width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0;}

2. AMP Widget Popular Post Dengan Gambar, Judul Artikel dan Snippet

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
                <h2><data:title/></h2>
            </b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:showThumbnails'>
          <!-- Show thumbnails Title and Snippets -->
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
            <div class='section'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' height='150' width='280'/>
                  </b:with><div class='judul'><data:post.title/></div>
                </a>
                <div class='konten'><data:post.snippet/></div>
            </div>
            </b:if>
        </b:if>
      </b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>

Gunakan CSS berikut atau edit jika ingin tampilan yang beda.

#PopularPosts1.PopularPosts div.section,#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase}
#PopularPosts1.PopularPosts div.section{position:relative;overflow:hidden;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left}
#PopularPosts1.PopularPosts a{position:relative}
#PopularPosts1.PopularPosts a div{width:280px;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0}
#PopularPosts1.PopularPosts div.section .konten{width:280px;height:100%;padding:8px 10px;background:rgba(0,0,0,.6);color:#fff;white-space:normal;position:absolute;top:0;left:0;z-index: 1;opacity:0;    transition: all .4s ease-in-out;}
#PopularPosts1.PopularPosts div.section:hover .konten{opacity:1}

LIHAT DEMO

Jika ingin menempatkan widgetnya di atas Footer. maka harus di buat <b:section> baru.
berikut penerapannya. salin code :

<b:section class='carousel-slides' id='carousel-slides' preferred='yes'>

----- masukan widget popular post seperti cara di atas di sini ------

</b:section>

isi bagian yang kosong dengan widget yang ada pada cara di atas,lalu letakan di atas tag HTML Footer.
Jika masih kesulitan cara penerapannya, silahkan diskusikan pada kolom komentar.