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 berjulukan amp-image-slider.
Dalam twitter resmi @amhtml, resmi meluncurkan <amp-image-slider> pada tanggal 15 september 2018.
Komponen ini memungkinkan pengunjung untuk melaksanakan klik dan slide pada 2 gambar yang berbeda. Anda sanggup melihat teladan 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 sanggup berisi dua elemen <div> untuk dipakai sebagai label untuk gambar. Label dihamparkan di atas gambar.
Label pada gambar kiri membutuhkan atribut pertama, sedangkan label yang sempurna 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=" Bisa diakali Dengan Menerapkannya pada Tutorial Penerapan amp-image-slider pada Featured Image Artikel Blogger"></amp-img>
<amp-img src="/red-apple.jpg" alt=" Bisa diakali Dengan Menerapkannya pada Tutorial Penerapan amp-image-slider pada Featured Image Artikel Blogger"></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> sanggup 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 memiliki wangsit bila ini sanggup diterapkan pada Feature image (Thumbnail) artikel anda. Demo sanggup dilihat di artikel ini.Dalam tutorial yang saya buat ini, dalam Thumbnail/featured image nantinya hanya akan memuat 1 gambar saja.
Namun sebab amp-image-slider mengharuskan memuat 2 gambar, maka saya mengakali satu gambar lainnya dengan memakai pengaruh blur.
Yang pertama kita lakukan yaitu mencopy komponen javascript
<amp-image-slider> dalam <head>. Copy instruksi berikut ini sebelum instruksi </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 menciptakan pengaruh Blur pada gambar child kedua, saya memakai 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 instruksi default dari Thumbnail/Featured Image.
Cari kode
<b:if cond='data:post.firstImageUrl'>, lalu ganti instruksi <b:if cond='data:post.firstImageUrl'> hingga </b:if> dengan instruksi di bawah ini, sehingga nantinya instruksi akan menjadi ibarat 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/AVvXsEh2sExY1CMRC-xLIa0huMZRxZd_MYUf3tcS5Jxf0OGyrcyoj3PMkjIw4Teqmot5rRtvUV0XRncpf_Ag_GNCP7x6iX8a0z_DR7RKugul1HMrrZ4GR56zP2JInmGTogVYJYK3cMlYVafOLvSd/s250/no-thumbnail.png'/> </a>
</div>
</b:if>
</b:if>Setelah semuanya selesai, silahkan klik SAVE.
Maka hasil dari perubahan tersebut akan menjadi ibarat gambar di bawah ini
Jika anda tidak suka dengan pengaruh gambar child kedua yang saya gunakan, anda sanggup mengkreasikannya sendiri dengan memakai CSS filter lainnya. Anda sanggup mencarinya di google.
Itulah tutorial mengenai Penerapan
amp-image-slider pada Featured Image Artikel Blogger. Semoga bermanfaat dan sanggup diterapkan pada Template Blogger AMP yang anda miliki.
