Masih menyambung dari postingan sebelumnya tentang modifikasi widget popular post Blogger dengan amp-carousel, kini kita akan memodifikasi widget popular post menjadi slide dengan autoplay.Mungkin ada yang bertanya, "Apa bedanya carousel dan slide yang sama-sama menggunakan amp-carousel?"
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.Untuk demo popular post dengan slider bisa dilihat di sidebar.
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 != ""'><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/AVvXsEgun7fW6Nuu9xTdiSbFsQJGvWOSSOJZB0Ap3wvHBP0HsvTBVDF_qnsSBbA8Z6tJ9bBqS_Q8kpVE-9DzF-8xkJFGRcpJobWpKbriGif2AZ4hcGHqHAZu7oZigD2VljRJ9p9AMSGaD02zfWRP/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'/>