Ditulis oleh: Ditulis pada: 12/20/2016
Popular posts adalah salah satu cara untuk menambah page view blog. Untuk itu perlu tampilan yang menarik pada popular posts agar menarik perhatian pembaca.Salah satu cara membuat popular posts pada blog AMP menjadi tampilan yang menarik adalah dengan memanfaatkan amp-carousel. Dengan sedikit modifikasi pada kode widget popular post, maka jadilah carousel popular post yang bisa disimpan di bagian atas atau bawah blog ataupun di sidebar.
Untuk demonya bisa dilihat di bagian bawah blog ini (jika saya belum merubahnya hehehe...)
Nah jika ingin mencobanya pada blog AMP Anda, silahkan ikuti langkahnya di bawah ini.
Langkah Pertama
Silahkan gunakan CSS di bawah ini untuk tampilan carousel popular posts.
.PopularPosts{background:#fff;padding:10px 30px 30px}
.PopularPosts amp-img{width:280px;height:180px;}
.PopularPosts h2{position:relative;overflow:hidden;margin:0 0 10px}
.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
.PopularPosts h2:after{content:'';display:inline-block;float:left;position:absolute;top:0;height:15px;margin:8px 0 0 0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_yt8b7Cno5ZYMDmGsep9_F23qEfWf5Fomo4cJwZupp9GtK1ovuZsc7Y-RMnLL74CwXNErwOlPmDNoMSYmuvuQMKKPtzdPf8pX70t0cBD65__qcYep4nJhcFdtdupAFx1z96yWJdbSo7v/s1600/repeat-bg.png);opacity:.9;}
Langkah Kedua
Silahkah copy kode HTML widget popular post di bawah ini untuk di atas (di bawah header) dan bawah blog (di atas footer). Jika sudah ada widget popular post di sidebar, silahkan hapus widgetnya.
<b:section class='carousel' id='carousel' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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 height='180' layout='fixed-height' type='carousel'>
<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. -->
<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, 280) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
</b:with>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel>
</div>
</b:includable>
</b:widget>
</b:section>
Jika ingin menampilkan di bawah Blog Posts, silahkan copy kode di bawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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 height='180' layout='fixed-height' type='carousel'>
<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. -->
<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, 280) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
</b:with>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel>
</div>
</b:includable>
</b:widget>
Kemudian simpan di bawah kode berikut
<b:includable id='threaded_comments' var='post'>...</b:includable>
</b:widget>
Sehingga penampakannya seperti berikut
<b:includable id='threaded_comments' var='post'>...</b:includable>
</b:widget>
KODE HTML POPULAR POST DI SINI
</b:section>
Jika ingin menampilkan di sidebar, silahkan ganti widget popular post yang lama dengan kode di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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 height='180' layout='fixed-height' type='carousel'>
<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. -->
<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, 280) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
</b:with>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel>
</div>
</b:includable>
</b:widget>
Dan pastikan Anda sudah menyimpan kode 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'/>