Membuat Widget Popular Post dengan Slide Atuplay di AMP html blogger

Pada carousel kita hanya bisa menggunakan image tanpa bisa menggunakan caption karena terdapat kode white-space: nowrap!important; agar item berjejer ke samping sehingga menyebabkan text yang melebihi area tidak bisa menjadi berbaris karena text akan ada dalam satu baris kecuali diakali dengan text-overflow: ellipsis; dan pada carousel tidak bisa menggunakan autoplay.

Sementara pada slide kita bisa menggunakan autoplay dan caption. Namun item yang tampil tidak berjejer seperti carousel, melainkan tampil satu per satu.

Dan bagi yang belum tahu, ternyata di Blogger kita bisa menampilkan lebih dari satu buah widget popular post dengan syarat menggunakan id widget yang berbeda yang secara default memiliki id="PopularPosts1". Unuk widget kedua dan seterusnya bisa menggunakan id="PopularPosts2" dan seterusnya. Dan setting-nya pun bisa berbeda, misal untuk widget pertama menampilkan popular post "All times" sementara widget satunya dengan "Last 7 days". Contohnya di blog ini saya menggunakan 2 widget popular posts, di sidebar dan di atas footer.

Kembali lagi ke modifikasi popular posts dengan AMP slide dengan autoplay, bagi yang ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Langkah Pertama

Silahkan ganti kode HTML widget popular posts dengan kode di bawah ini.

          <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>

Langkah Kedua

Gunakan CSS style di bawah ini untuk memodifikasi tampilannya.

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwLoMK7qGjgGdr98CrW8VUkMj3al9LhvXyG_y9e_WE2lMdKAt_RUhy0YSb3wHTRxe5zLoeWc5c9MZKiKgIh84_eX51PVbWmzaHtfCG7SwgH599YJ_sMoRzcDYRJ1h9Xzh8juewPhT5m3C/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}

Dan pastikan Anda sudah menyimpan kode js 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 : kompiajaib