Cara Membuat Popular Post Carousel Efek Slide AutoPlay Valid AMP DiSidebar
Pada postingan sebelumnya saya sudah pernah membahas Cara Mudah Memasang Komentar Facebook Di Blog Valid AMP HTML Dan pada kesempatan kali ini saya akan menjelaskan cara membuat popular Post Carousel dengan efek Auto Slider.
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 dan dipasang di sidebar.
Tertarik untuk mencoba? Silahkan ikuti Caranya Membuatnya dibawah ini:
amp-carousel
, berikut ini:
<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 != ""'><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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEn9QuMUeuNYaBdxY1F7vC1qLvqhlDx0KjPWPQoAXdhGmJfJUm-JVd9oORV6PT2DisWI6thFTj9NtsXOw6yxXe6hyphenhyphenbHBpfPfqomL7W6pdhett1fUJWxdK_abj8qtXLpeTStJAHCoD5lfc/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.
Source: kompiajaib.com
Tinggalkan komentar