Skip to main content
Ivhaa Design

follow us

Cara Membuat Widget Popular Posts Dengan Layout Carousel Slide pada HTML AMP

Cara membuat Widget Popular Posts Dengan Layout Carousel Slide pada HTML AMP

Baca juga:



Hallo sobat blogger ketemu lagi dengan saya di blog ini, kali ini saya akan memberikan tutorial lagi buat kalian semua tutorial ini saya dapat dari blog edencreative.blogspot.co.id/2017/06/2-tampilan-amp-carousel-untuk-widget.html untuk menampilkan populer pos dengan valid AMP. Jika kalian ingin mengetahui AMP Carousel bisa kalian lihat di sini

Sebenarnya tidak terlalu sulit untuk membuat Widget Populer Post nah jika kalian tertarik dengan tutorial ini simak artikel ini sampai selesai ya sobat blogger.

Yang pertama kalian pasang komponen berikut ini
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Setelah itu kalian cari kode yang mirip dengan di bawah ini
<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>

Jika sudah di temukan dan tahu penempatannya harus dimana.
kemudian letakan code berikut di bagian
--- widget baru disini ---

Untuk kali ini saya kasih 2 style populer pos yang mungkin bisa kalian gunakan untuk kalian pakai jadi blog makin menarik.

1. Widget AMP Populer Post Dengan Gambar Dan Judul

Masukan kode HTML tersebut untuk menambah widget populer pos tadi
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
                <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>

Setelah itu masukan CSS ini di amp-costume


 #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. Widget Populer Pos Dengan Gambar Dan Judul Artikel Tambahan Snippet


Masukan kode HTML tersebut untuk menambah widget populer pos tadi
 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
                <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>

Setelah itu masukan CSS ini di amp-costume


#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}


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

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar