Tutorial Penerapan amp-image-slider pada Featured Image Artikel Blogger
Komponen Terbaru Bernama amp-image-slider, Bisa diakali Dengan Menerapkannya pada (Featured Image) Thumbnail Postingan
Baru-baru ini, AMP HTML telah meluncurkan komponen javascript terbarunya yang bernama amp-image-slider.
Dalam twitter resmi @amhtml, resmi meluncurkan <amp-image-slider> pada tanggal 15 september 2018.
Komponen ini memungkinkan pengunjung untuk melakukan klik dan slide pada 2 gambar yang berbeda. Anda bisa melihat contoh yang sudah saya terapkan di blog Janganlupabahagia.com.
Behavior
Komponen amp-image-slider membutuhkan dua elemen amp-img sebagai child. Gambar child pertama ditampilkan di sebelah kiri, gambar kedua ditampilkan di sebelah kanan.Komponen amp-image-slider juga dapat berisi dua elemen <div> untuk digunakan sebagai label untuk gambar. Label dihamparkan di atas gambar.
Label pada gambar kiri membutuhkan atribut pertama, sedangkan label yang tepat membutuhkan atribut kedua. Secara default, label ditampilkan di sudut kiri atas gambar. Adapun Layout yang support <amp-image-slider> yaitu responsive, fixed dan intrinsic.
Sample dasar <amp-image-slider> :
<amp-image-slider layout="responsive" width="100" height="200">
<amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
<amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
<div first>This apple is green</div>
<div second>This apple is red</div>
</amp-image-slider>
Untuk lebih jelasnya mengenai apa itu <amp-image-slider> bisa dilihat di sini.
Menerapkan amp-image-slider pada Blogger
Kali ini saya akan mencoba untuk menerapkan komponen amp-image-slider tersebut pada CSM Blogger. Dan saya mempunyai ide jika ini bisa diterapkan pada Feature image (Thumbnail) artikel anda. Demo bisa dilihat di artikel ini.Dalam tutorial yang saya buat ini, dalam Thumbnail/featured image nantinya hanya akan memuat 1 gambar saja.
Namun karena amp-image-slider mengharuskan memuat 2 gambar, maka saya mengakali satu gambar lainnya dengan menggunakan efek blur.
Yang pertama kita lakukan adalah mencopy komponen javascript
<amp-image-slider> dalam <head>. Copy kode berikut ini sebelum kode </head> atau <head> .
<b:if cond='data:blog.pageType == "item"'>
<script async='async' custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"/>
</b:if>Untuk membuat efek Blur pada gambar child kedua, saya menggunakan CSS filter. Silahkan copy CSS berikut ini di antara
<style amp-custom='amp-custom'> .... </style>
.blurry {
-webkit - filter: blur(2 px); /* Safari 6.0 - 9.0 */
filter: blur(2 px);
}Selanjutnya kita akan menempatkan <amp-image-slider> untuk mengganti kode default dari Thumbnail/Featured Image.
Cari kode
<b:if cond='data:post.firstImageUrl'>, kemudian ganti kode <b:if cond='data:post.firstImageUrl'> sampai </b:if> dengan kode di bawah ini, sehingga nantinya kode akan menjadi seperti di bawah ini:
<b:if cond='data:post.firstImageUrl'>
<amp-image-slider height='200' initial-slider-position='0.3' layout='responsive' width='300'>
<amp-img class='contain' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' layout='fill'/>
<amp-img class='contain blurry' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' layout='fill'/>
</amp-image-slider>
<b:else/>
<div class='fixed-height-containerthumb'>
<a expr:href='data:post.url'>
<amp-img class='contain' expr:alt='data:post.title' expr:title='data:post.title' layout='fill' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEG-1KElvdKgqXJ4RKIuXRebTV8DOdu6g1WrWjpmLKVjQ3CzP9HCiw9iS2016iYTmWzijqH_8ujy_P9gddK-M0C4sNmwZAagdwtAOCZCTRhRDglErIIVNHJaTjQtrzUpeuzYpKD2yiziH1/s250/no-thumbnail.png'/> </a>
</div>
</b:if>
</b:if>Setelah semuanya selesai, silahkan klik SAVE.
Maka hasil dari perubahan tersebut akan menjadi seperti gambar di bawah ini
Jika anda tidak suka dengan efek gambar child kedua yang saya gunakan, anda bisa mengkreasikannya sendiri dengan menggunakan CSS filter lainnya. Anda bisa mencarinya di google.
Itulah tutorial mengenai Penerapan
amp-image-slider pada Featured Image Artikel Blogger. Semoga bermanfaat dan bisa diterapkan pada Template Blogger AMP yang anda miliki.