Cara Pasang Popular Post Carousel Blogger Valid AMP

Modifikasi widget popular post ini memakai amp-carousel dan dipasang pada sidebar. Tertarik buat 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.