Membuat Slider Popular Posts Blogger di Amp Template

Cara Membuat Slider Popular Posts Blogger di Amp Template bagus :

Buat section widget ditempat yg anda inginkan :

<b:section class='featured-posts' id='featured-posts' maxwidgets='1'>

</b:section>

Masukkan code ini diantara section tadi :

<div class='slide'>
           <b:if cond='data:showThumbnails'>
             <a expr:href='data:post.href' target='_blank'>
               <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 400, &quot;4:3&quot;) : data:post.thumbnail' var='image'>
                  <amp-img expr:alt='data:post.title' expr:attribution='&quot;CC &quot; + data:blog.title' expr:src='data:image' height='480' width='640'/>
               </b:with>
             </a>
           </b:if>
           <div class='caption'>
              <h4><a expr:href='data:post.href'><data:post.title/></a></h4>
              <b:if cond='data:showSnippets'>
                <p><data:post.snippet/></p>     
              </b:if>
           </div>
         </div>
       </b:loop>
     </amp-carousel>
   </b:if>
 </b:includable>
 </b:widget>

Untuk mengatur tampilan, masukkan code css ini di atas </style>

.featured-posts {
  background-color: #f9f9f9; /* background color for slider section */
}

.featured-posts .widget h2 {
  color: inherit; /* widget title color */
}

.featured-posts a {
  color: #ffffff; /* links color */
}

.featured-posts .slide {
  position: relative;
}

.featured-posts .caption {
  text-align : center;
  position : absolute;
  top : 50%;
  z-index: 99;
  width : 100%;
  padding: 20px 0;
  background-color: rgba(0,0,0,.25);
  color: #ffffff; /* text color */
}

.featured-posts h4 {
  font-size: 23px; /* post title font size */
}

.featured-posts p {
  font-size: 18px; /* caption text font size */
  color: inherit;
}

Selesai