Cara membuat Widget Popular Posts Blogger dengan Layout Carousel Slide pada HTML AMP tidak terlalu sulit jika sudah tahu bagaimana penempatan widgetnya.
pengertian dasar dari AMP Carousel adalah menampilkan beberapa konten dalam garis horizontal. dengan ini widget Popular Posts Blogger akan lebih menarik dan mudah di gunakan oleh pengunjung. ada beberapa element dasar pada AMP Carousel yang bisa di coba mana yang lebih menarik dan cocok untuk tema template web/blog.
Elemen Type Pada AMP Carousel
- type="carousel"
- type="slides"
- Auto Slide
<amp-carousel type="slides" autoplay delay="2000">
Penerapan Layout AMP Carousel Slide pada Widget Blogger
Pastikan Script Component sudah terpasang.Cara Pasang Widget Artikel Populer Dibawah Posting BLog.
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Cari code berikut :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>...</b:widget>
---------- widget baru disini ----------
</b:section>kemudian letakan code berikut di bagian --- widget baru disini ---
1. AMP Widget Popular Post Dengan Gambar Dan Judul Artikel
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:showThumbnails'>
<!-- Show thumbnails and Title -->
<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='150' width='280'/>
</b:with><div><data:post.title/></div>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px;}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
#PopularPosts1.PopularPosts a{position:relative;}
#PopularPosts1.PopularPosts a div{width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0;}2. AMP Widget Popular Post Dengan Gambar, Judul Artikel dan Snippet
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:showThumbnails'>
<!-- Show thumbnails Title and Snippets -->
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='section'>
<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='150' width='280'/>
</b:with><div class='judul'><data:post.title/></div>
</a>
<div class='konten'><data:post.snippet/></div>
</div>
</b:if>
</b:if>
</b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>#PopularPosts1.PopularPosts div.section,#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase}
#PopularPosts1.PopularPosts div.section{position:relative;overflow:hidden;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left}
#PopularPosts1.PopularPosts a{position:relative}
#PopularPosts1.PopularPosts a div{width:280px;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0}
#PopularPosts1.PopularPosts div.section .konten{width:280px;height:100%;padding:8px 10px;background:rgba(0,0,0,.6);color:#fff;white-space:normal;position:absolute;top:0;left:0;z-index: 1;opacity:0; transition: all .4s ease-in-out;}
#PopularPosts1.PopularPosts div.section:hover .konten{opacity:1}Jika ingin menempatkan widgetnya di atas Footer. maka harus di buat<b:section>baru.
berikut penerapannya. salin code :
isi bagian yang kosong dengan widget yang ada pada cara di atas,lalu letakan di atas tag HTML Footer.<b:section class='carousel-slides' id='carousel-slides' preferred='yes'> ----- masukan widget popular post seperti cara di atas di sini ------ </b:section>
Jika masih kesulitan cara penerapannya, silahkan diskusikan pada kolom komentar.
