Cara Membuat Widget Popular Post Efek Slide Autoplay Valid AMP

Sebenarnya ini adalah bentuk modifikasi widget popular post berupa Popuar Post slide autoplay. Dan, bagusnya widget ini tidak mengurangi kecepatan blog anda yang sudah valid AMP tersebut.

Modifikasi widget popular post ini menggunakan amp-carousel

Tertarik untuk mencoba? Silahkan ikuti Caranya Membuatnya dibawah ini:

Langkah Pertama pastikan blog anda sudah memasang kode amp-carousel, berikut ini:

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

Langkah Kedua Pastikan anda sudah memasang widget popular post pada sidebar.

Kemudian, silahkan Masuk ke edit template anda dan ganti kode popular post yang anda tambahkan di sidebar tersebut dengan kode dibawah 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 memperbagus Tampilanya, silahkan anda tsmbahkan CSS berikut ini pada template anda:

#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/AVvXsEgeQlYh10HQa0LgXh9Dd2_AolDWOrY1KIGVbFIHOJi-4tp7BuvYz9mtubEvGZkqNwH3hHSxL9KXuAU1p6Nwd1vyXOQt2MpLM5gJ8jlfldGvzpP93Uk9RDrD1XjTgZsiHRLAFkOtdpLxBqfA/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}

Terkhir Klik Simpan Template, dan lihat hasilnya.

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

Source: kompiajaib.com

Berbagi :