Halo sobat mamang, gambar atau image merupakan bagian yang sangat penting bagi sebuah blog atau web. Selain mempercantik halaman, diharapkan banyak pengunjung atau visitor yang akan menarik minat membaca di blog kita.
Nah, untuk penerapan di blog yang non amp mungkin sangat mudah, cukup upload atau insert, cukup. Tetapi bagi blog yang valid amp, tentu harus dilakukan pengeditan terlebih agar gambar yang kita upload menjadi valid AMP.
Kalau untuk mengupload satu gambar saja, cukup dengan script <amp-img, tapi kali ini yang akan mamang bahas yaitu membuat slider untuk beberapa gambar di postingan blogger yang valid amp.
Tapi sebelumnya simak dulu artikel mamang sebelumnya yang membahas cara upload gambar agar artikel menjadi super ringan.
Membuat Slider Gambar Di Blogger Valid AMP
Untuk blog atau web yang berplatform wordpress, membuat slider gambar yang valid amp sangatlah mudah. Cukup dengan memaki plugin amp, maka kita gak perlu repot membuatnya.
Tetapi untuk blogger, membuat carousel image harus dilakukan secara manual. Oke langsung saja, berikut caranya.
1. Pasang kode berikut dibawah kode <head> di tema kalian
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
2. Tambahkan kode dibawah pada artikel dalam mode html atau dalam tema kalian
<amp-carousel width="400" height="300" layout="responsive" type="slides">,
<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
</amp-carousel>
3. Ganti Kode # dengan alamat gambar kalian
Jangan lupa untuk mengganti ukuran tinggi dan lebarnya agar sesuai dengan ukuran postingan atau tema kalian.
Agar tidak bingung, mamang akan contohkan beberapa variasi dari penerapan AMP Carousel untuk blog yang valid AMP.
Slider AMP Carousel Manual Blogger AMP
Contoh kode
<amp-carousel width="400" height="300" layout="responsive" type="slides">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqK2ZEh1rxvC6ekq7kWbLgbd2hpLT4Ak6RBwQiyhmITx82hMCocoNq5eJNxuDKlciuDWmWrLzbsLUpeLSY9-p2Yn7xRkThc-rcZQfAMqnD3osqCz_rWsHma9C-dyB6kqqUzUsXO9uTwUA/s1600/004.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtot5FoPVUpqK_aaGuDjv_M80ZpyEQAXWj-L00tB1VsQtr_DJTZlOCHyI8yeQeA9mlBuvfGxLhRp_ZIPyFcsCKBwjYR7Apn3nTUefNREZ8tZd8YqRVYGICrqgav_muhXlX7epbFBVuw4/s1600/picjumbo.com_hanv9909.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK946Den5NnWBl0iI09iEvZLy0kDajhoX0CzwTnKwIxBt_KdS6nK-YhJpgXFoLNwrRANdvXrAjfypc340PG3Oe1_mlZNk2hyphenhyphen591qZ7I5o4Xbz2u8yjcnxI45UZC0sQeiL3pCpqvqGJ7k4/s1600/road220058.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
</amp-carousel>
Hasilnya
Untuk menggerakannya, kalian perlu memencet tombol arah kanan dan kiri, karena memang ini secara manual.
Slider AMP Carousel Otomatis Blogger AMP Delay 2 Detik
Contoh Kode
<amp-carousel <b>autoplay delay="2000"</b> width="400" height="300" layout="responsive" type="slides">
<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
<amp-img src="#" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
</amp-carousel>
Hasilnya
Maka gambar atau image akan bergerak sendiri dengan otomatis delay 2 detik. Ukuran detiknya yaitu 2000. Kalian bisa merubah waktu delaynya sesuai dengan keinginan.
Slider AMP Carousel Untuk Teks Blog AMP
Contoh Kode
<amp-carousel autoplay delay="2000" height="150" layout="fixed-height" type="slides">
<div><center>"Teks I"</center></div>
<div><center>"Teks II"</center></div>
</amp-carousel>
Hasilnya
Bukan hanya gambar saja, ternyata teks pun bisa dibuat menjadi suatu slide di blog yang sudah valid amp.
Itulah beberapa contoh kode untuk menerapkan slider image di amp blogger. Kode ini hanya akan berjalan jika blog kalian benar-benar sudah valid amp.
Karena kalau versi biasa tidak bisa dilihat harus benar-benar valid AMP, Silahkan lihat postingan ini dari versi AMP disiniSelamat mencoba dan semoga bermanfaat.
