Cara Mudah Buat Popular Post Amp Slide

Perkembangan akan kebutuhan informasi belakangan ini sangat pesat sekali, kebutuhan informasi selalu updated hal ini menuntut Industri kreatif terus berinovasi menyajikan Informasi yang sesuai dengan kebutuhan sekarang ini. Dari forum-forum yang saya ikuti sekarang ini banyak developer Website atau para mastah Blogger bersaing dan terus mengembangkan teknologi informasinya dalam Website atau blog yang mereka sajikan termasuk blog saya ini demi menyajikan informasi yang atau konten yang berkualitas dituntut pula dapat menyajikan tampilan yang SEO dan Mobile Friendly seperti pembahasan sebelumnya yang sudah saya ulas mengenai SEO.

Pernah atau sering kali kita melihat tampilan Website sekarang ini selain Mobile Friendly dan SEO yang bagus tentunya diimbangi dengan konten yang berkualitas trafik dari website atau blog tersebut sangat luar biasa seperti Website yang sering saya ikuti dan pembahasan ini saya adopsi dari webnya Kompiajaib bagaimana membuat dan menyajikan tampilan website yang SEO dan ramah bagi pengguna Mobile.

Tentu bukan hal yang asing lagi bagi para Master yang memang sehari-hari berkutat di dunia ini, apalagi dalam beberapa tahun belakangan ini Google selaku raksasa internet telah menyarankan bagi Developer Website atau pengguna Blogger agar menggunakan teknologi amp untuk di aplikasikan di dalam tampilan Website atau Bloggernya. Google memang yang pertama kali menyerukan penggunaan amp ini untuk Website. Sepanjang pengamatan saya ada Pro dan Kontra di kalangan Developer website atau para Blogger, banyak juga yang berpendapat bahwa metode amp ini masih banyak kekurangannya dalam penerapan script kodenya, ada juga yang berpendapat ini bagus dan wajib untuk di gunakan di webste atau blognya. Namun kalau menurut saya bukan dari sisi Script yang masih belum sempurna tapi memang rata-rata kita ini masih sedikit sekali yang bisa menerapkan amp ini di  webstite atau blog, justru menurut saya dan yang sudah saya lakukan amp ini sangat bagus dan ringan untuk kecepatan website atau blog kita beda halnya dengan HTML5.

Dari pandangan dan fenomena diatas saya mencoba memberanikan ini untuk berbagi ke sobat artikel Cara Mudah Buat Popular Post Amp Slide dengan memodifikasi Widget popular post dengan metode amp slide dengan autoplay. Mungkin banyak dari sobat sobat semua yang masih bingung dan bertanya bedanya slide dan carousel, toh juga sama menggunakan amp-carousel ?. Jadi begini penjelasannya sobat, kalau carousel hanya menggunakan image tanpa caption karena didalamanya ada script white-space: nowrap!important; supaya item jejer ke samping jadi text yang melebihi area tidak akan bisa berbaris karena text secara otomatis dalam satu baris lain halnya jika di siasati dengan text-overflow: ellipsis; dan mengakibatkan carousel tidak bisa autoplay.

Nah kalau pada slide sobat hanya bisa menggunakan  autoplay dan caption tapi kekurangannya item yang mau ditampilkan tidak bisa sejajar seperti halnya carousel hanya bisa menampilkan satu persatu.

Lalu bagaimana jika kita ingin menerapkannya di Blogger? ini kabar baik ternyata di templated blogger bisa diterapkan metode ini dan bisa menampilkan lebih dari satu widget popular post namun syaratnya harus dan wajib menggunakan id widget yang berbeda seperti contohnya secara default harus seperti id="PopularPost1" ini yang ada di blogg sobat untuk id widget PopularPost ke dua dan seterusnya gunakan seperti ini id="PopularPost2" dan seterusnya jika ingin menambahkan lebih banyak. Jangan lupa setingannya harus berbeda pula misal widget popularpost pertama di beri nama "Setiap Waktu" untuk widget popularpost yang ke dua diberi nama "7 hari Popular" sobat bisa bebas memberikan namanya pada widget popularpostnya. 

Lalu bagaimana nih cara penerapannya berikut dibawah ini Cara Mudah Buat Popular Post Amp Slide dengan Autoplay silahkan sobat ikuti langkahnya, dan sebelum memulai ada baiknya sobat backup terlebih dahulu templatednya untuk berjaga jika penerapan ini terjadi error.

Langkah Pertama

Sobat masuk ke Widget Popular Post lalu ganti dengan kode HTML berikut 

<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 != &quot;&quot;'><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>

Sobat perhatikan betul kodenya, kemudian simpan lalu lanjut berikutnya


Langkah ke dua
Untuk modifikasi tampilannya gunakan CSS Style dibawah ini :

#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/AVvXsEint6yNPBqEkAFQhIWCRF5CeeME_PNLrmDyjU8OUIeAT_7m26mHFE0LNfV0THFdmqKqkb8izpNxOyKiJOzz0hVkMDqfy6Z7ChppCNPNRV3J1CPWRY1aWVq7uWIDRxNV5RlLQF-d_cspmV6E/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}

Setelah selesai wajib diperhatikan sobat wajib memastikan sudah menyimpan kode JS amp-carousel seperti tampilan kode dibawah ini diatas kode </head>.

<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>

Bagaimana sobat penasaran untuk segera menerapkannya, silahkan sobat coba semoga bermanfaat, dan yang tidak kalah penting selain penerapan SEO di website atau blog hal yang paling utama adalah penyajian artikelnya atau konten yang berkualitas, karena percuma saja kalau SEOnya oke dan keren kalau tidak diimbangi dengan penyajian konten yang berkualitas pasti tidak akan mempunyai pengunjung yang setia karena dianggap hanya menyajikan konten yang biasa saja, apalagi jika kontenya hanya dari hasil copy paste, sudah otomatis akan dianggap tidak baik oleh search engine terutama Google.

Terima kasih sobat sudah berkunjung jika ada yang ingin di tanyakan dapat melalui komentar ini atau dengan senang hati saya menerima jika ada yang ingin berbagi pengalaman seputar artikel ini.