Modifikasi Popular Post with Slide Autoplay valid AMP

Tidak bisa dipungkiri bahwa blog valid AMP memiliki keterbatasan tertentu dan sulit untuk membuat aneka modifikasi pada widgetnya. Hal itu tak lain karena AMP sendiri membatasi dan melarang penggunaan JS. Namun hal itu tidak berarti AMP kering dari aneka kreatifitas.

Yups, pada kesempatan ini sahabat akan diperkenalkan bentuk modifikasi widget popular post berupa slide autoplay. Dan, uniknya tidak mengurangi kecepatan blog sahabat yang valid AMP tersebut.

Modifikasi ini menggunakan amp-carousel dan berada di sidebar. Fungsinya selain meminimalisir tempat dan juga membuat tampilan blog sahabat menjadi elegant dan ciamik. Sahabat pasti penasaran bukan? Biar tidak penasaran, silahkan lihat demonya di bawah ini:

DEMO

Bagaimana tertarik bukan? OK, langsung saja berikut cara modifikasi widget popular post dengan slide autoplay yang tentunya valid AMP. Resep ini adalah milik kang Adhy Suryadi pemilik kompiajaib.COM. Untuk langkah-langkahnya, silahkan ikuti step by step berikut ini:

#Langkah Pertama

Pastikan sahabat sudah memasang kode amp-carousel, yaitu:

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

#Langkah Kedua

Pastikan juga sahabat memasang widget popular post pada sidebar terlebih dahulu. Selanjutnya, silahkan menuju template sahabat dan ganti kode popular post tersebut dengan kode berikut 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 Ketiga

Untuk mempercantik penampilan, silahkan sahabat memsang CSS berikut ini pada template sahabat:

#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/AVvXsEjhfCKMMgPfuFBrSiU5kyk_IZhyphenhyphenRdezMz8XWH_10llxNC_RRdjHWff4b6mi8jsZOZpVIIn1CBydCe3ZNv0OlfNkTE2VwJhyTZMa9HXYNyy4z3gL9LVZ19keLQxs6Wj3AZLpdHt4nK1I9t8c/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}

Tralala... Sekarang sahabat telah memiliki widget popular post yang keren habis, yaitu dengan berbentuk slide autoplay valid AMP

Source: http://www.kompiajaib.com/2016/12/blogger-popular-posts-with-amp-slide.html