Cara Menyisipkan Gambar Slide Valid AMP di Blogger

Genyo.id | 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 .

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

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

<amp-carousel height="300" layout="fixed-height" type="carousel">
<amp-img src="URL_GAMBAR_1" width="400" height="300" alt="teks alt gambar"></amp-img>
<amp-img src="URL_GAMBAR_2" width="400" height="300" alt="teks alt gambar"></amp-img>
<amp-img src="URL_GAMBAR_3" width="400" height="300" alt="teks alt gambar"></amp-img>
</amp-carousel>

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

Kode

<amp-carousel height="300" layout="responsive" type="slides" width="400">
<amp-img height="300" layout="responsive" src="URL_GAMBAR" width="400"></amp-img>
<amp-img height="300" layout="responsive" src="URL_GAMBAR" width="400"></amp-img>
<amp-img height="300" layout="responsive" src="URL_GAMBAR" width="400"></amp-img>
</amp-carousel>

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

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000">
<amp-img src="URL_GAMBAR" width="400" height="300" layout="responsive" alt="gambar sampel"></amp-img>
<amp-img src="URL_GAMBAR" width="400" height="300" layout="responsive" alt="gambar sampel"></amp-img>
<amp-img src="URL_GAMBAR" width="400" height="300" layout="responsive" alt="gambar sampel"></amp-img>
</amp-carousel>

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

<amp-carousel height="300" layout="fixed-height" type="slides">
<div><div class="blue-box">Ini adalah kotak berwarna biru.</div></div>
<div><div class="red-box">Ini adalah kotak berwarna merah.</div></div>
<div><div class="green-box">Ini adalah kotak berwarna hijau.</div></div>
</amp-carousel>

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 <style amp-custom='amp-custom'>

<!-- Css Custom boxes -->
.blue-box,.green-box,.red-box{width:100%;height:280px;color:white;font-size:1.5rem;padding:2rem 1rem;box-sizing:border-box;text-align:center}.blue-box{background:#00BCD4}.red-box{background:#F44336}.green-box{background:#8BC34A}

Dengan menggunakan cara di atas kalian dapat membuat inovasi baru pada tampilan blog meskipun dengan menggunakan Template AMP HTML, tetap Dapat digunakan untuk menyisipkan gambar yang lebih banyak tanpa harus menggunakan banyak tempat. Mungkin hanya itu saja untuk artikel kali ini tentang Menyisipkan Gambar Slide di Postingan Valid AMP Blogger.