Cara Menyisipkan Gambar Slide Valid AMP di Blogger

ValidAMP | Bagi kalian pengguna AMP HTML Blogger tidak perlu khawatir dengan tampilan yang terlalu sederhana atau fitur yang kurang lengkap. dikarenakan bagi pengguna blogger yang menggunakan template AMP HTML dapat menambahkan tampilan-tampilan yang cukup menarik pula.

Salah satunya yakni amp-carousel. Komponen amp-carousel memungkinkan untuk menampilkan beberapa komponen serupa secara horizontal dan dapat digeser. atau yang lebih biasa dikenal menampilkan gambar secara slide.

Hal ini berbeda dengan template HTML biasa yang untuk membuat gambar slide mungkin diperlukan beberapa kode tambahan termasuk kode JavaScript yang mengontrol fungsi gambar slide nantinya. Namun akan jauh lebih mudah jika menggunakan Template AMP HTML.

Setup Gambar Slide pada Postingan Blogger
Untuk menyisipkan gambar slide pada postingan blogger ada beberapa hal yang perlu kalian lakukan. Yang harus pertama dilakukan yaitu memasang kode amp-carousel. Silahkan tambahkan dahulu kode amp-carousel berikut ini diatas kode .

Jika sudah, Simpan Template dan silahkan buat Postingan baru pada mode HTML buka Compose dan coba gunakan beberapa Kode Model Efek Gambar slide berikut ini.

Basic Usage
Gunakan type="carousel" untuk menampilkan gambar secara bersambung.






Kode

Slides
Gunakan type="slides" untuk menampilkan gambar secara penuh dengan slide.






Kode

Autoplay
Atribut autoplay (hanya untuk type=slides) akan menggerakkan slide dan memindahkan gambar satu ke gambar selanjut-nya tanpa interaksi user. Secara default akan memajukan slide dalam 5000 interval milidetik (5 detik), dan dapat pula diubah dengan atribut delay=6000 untuk 6 detik.






Kode

Custom boxes
Selain gambar kalian juga bisa menambahkan slide dalam bentuk kotak yang berisi teks, sehingga kalian bisa membuat teks dalam bentuk slide yang bisa berganti-ganti.



Kode

  
Ini adalah kotak berwarna biru.
  
Ini adalah kotak berwarna merah.
  
Ini adalah kotak berwarna hijau.

Khusus bagian custom boxes kalian perlu menambahkan kode CSS khusus kedalam tag style. Tapi hanya jika diperlukan, untuk membedakan kotak yang satu dengan ya lain. silahkan taruh kode css dibawah ini didalam kede