Cara Pasang Popular Post Carousel Blogger Valid AMP

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

          <b:widget id='PopularPosts1' locked='false' title='Hot on this week:' 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 autoplay='autoplay' delay='2000' height='180' layout='fixed-height' type='slides'>
      <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. -->
            <div class='slide'>
            <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='180' width='300'/>
                  </b:with>
                </a>
            </b:if>
                  <div class='caption'><data:post.title/></div>
            </div>
        </b:if>
      </b:loop>
</amp-carousel>
  </div>
</b:includable>
          </b:widget>

#PopularPosts1.PopularPosts{background:#fff;padding:0}
#PopularPosts1.PopularPosts amp-img{width:300px;height:180px;}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0 10px 10px 0;padding:10px 0 0}
#PopularPosts1.PopularPosts h2 div{padding:0 10px;display:inline;float:left;}
#PopularPosts1.PopularPosts h2:after{content:'';float:left;position:absolute;top:12px;height:15px;margin:0;width:100%;background:url(https://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/s1600/repeat-bg.png);opacity:.9;}
#PopularPosts1.PopularPosts .slide .caption{position:absolute;bottom:-19px;left:0;right:0;padding:6px 8px 10px;background:rgba(0,0,0,.6);color:#ddd;font-size:smaller;max-height:30%;line-height:1.1em}

Mungkin hanya itu saja untuk Cara Membuat Widget Popular Post Efek Slide Autoplay Valid AMP. Semoga bermanfaat.