Menyisipkan Gambar dengan Slide Valid AMP di Blogger



Bagi kamu pengguna AMP HTML, tidak perlu khawatir dengan tampilan yang terlalu sederhana atau fitur yang kurang lengkap. Sebab bagi kamu pengguna blogger yang menggunakan template AMP HTML bisa menambahkan tampilan-tampilan yang cukup menarik.

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

Berbeda dengan HTML biasa yang untuk membuat gambar slide mungkin diperlukan beberapa kode tambahan termasuk kode JavaScript yang mengontrol fungsi gambar slide. Namun jauh lebih mudah jika menggunakan AMP HTML. Berikut ini contoh gambar yang tampil secara slide dan tentunya valid AMP:



Setup gambar slide di posting blogger

Untuk menyisipkan gambar slide pada postingan blogger ada beberapa hal yang perlu kamu lakukan. Pada halaman Blogger, buka Tema lalu klik Edit HTML. Tambahkan kode berikut ini pada bagian <head>.

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

Basic Usage

Gunakan type="carousel" untuk menampilkan gambar secara bersambung. Contohnya:



<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. Contohnya:



<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 selanjutnya tanpa interaksi user. Secara default akan memajukan slide dalam 5000 interval milidetik (5 detik), dan dapat diatur dengan atribut delay=6000 untuk 6 detik. Contohnya:



<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 kamu juga bisa menambahkan slide dalam bentuk kotak yang berisi teks, sehingga kamu bisa membuat teks dalam bentuk slide yang bisa berganti-ganti. Contohnya:

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


Khusus bagian custom boxes kamu perlu menambahkan kode CSS khusus kedalam tag style. Tapi hanya jika diperlukan, untuk membedakan kotak yang satu dengan ya lain.

<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>

<!-- Tambahkan style khusus -->
<style>.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}</style>

Penutup

Dengan menggunakan cara di atas kamu bisa membuat inovasi tampilan blog meskipun dengan menggunakan AMP HTML. Dapat digunakan untuk menyisipkan gambar yang lebih banyak tanpa harus menggunakan banyak tempat. Serta dapat pula digunakan untuk menampilkan testimoni, komentar terbaik secara slide tanpa perlu menggunakan banyak tempat. Terima kasih dan sampai jumpa!
Disqus Comments