Cara Memasang Gambar Slide Pada Blog Valid AMP


Apa jadinya jika blog sobat tidak ada sentuhan foto atau gambar, pastinya akan membosankan bukan?? Nah... untuk itu pada kesempatan ini saya akan mengulas tentang bagaimana cara memasang gambar dengan tampilan slide pada blog sobat yang sudah valid AMP.

Cara memasang gambar dengan fitur slide di blog valid AMP sangatlah mudah dan hasilnya pun sangat memuaskan dan tidak membosankan bagi pengunjung blog sobat atau pun bagi sobat sendiri sebagai pemilik blog tersebut.

Sebelum kita lanjut ke cara pemesangan, kita harus tau dulu tentang "apa itu gambar slide?" Gambar slide adalah beberapa gambar yang ditampilkan secara bergantian satu per satu.

Gambar slide bisa digunakan untuk menampilkan berbagai macam gambar sesuai kebutuhan sobat untuk mempercantik blog sobat. Cara untuk membuat gambar slide ini sangat mudah, tidak perlu mahir mengoperasikan photoshop atau software edit gambar lainnya. Kita tinggal menyiapkan foto/gambar yang sudah diupload (dihosting). Kita bisa memanfaatkan fitur post pada blogger, Picasa, Photobucket, dan lain sebagainya.

Ok sekarang kita lanjut lagi ke bagian Cara Memasang Gambar Slide Pada Blog Valid AMP


1. Login ke blogger
2. Pilih Tema
3. Edit HTML
4. Cari code </head> dan letakan kode di bawah ini, tepat diatas kode tersebut. Namun jika di template sobat sudah terdapat code dibawah ini, maka sobat tidak perlu memsangnya lagi.

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


5. Klik Simpan Tema

Nah cara diatas adalah cara yang paling utama yaitu pemasangan komponen penting yang harus kita lakukan agar gambar slide yang kita pasang nantinya berhasil dengan baik dan valid AMP, Lalu cara berikutnya yang akan kita lakukan adalah cara pemasangan code untuk gambar-gambar yang akan kita pasang. Ok kalau begitu mari kita lanjut ke cara berikutnya dibawah ini,

1. Pilih Tata Letak
2. Klik Tambahkan Gadget (Bebas terserah sobat mau dipasang di mana, mau di bawah header atau pun di sidebar. Silahkan sobat sesuaikan dengan kebutuhan)
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<amp-carousel width="450"
  height="327">
  <amp-img src="url-images/image1.jpg"
    width="660"
    height="327"></amp-img>
  <amp-img src="url-images/image2.jpg"
    width="660"
    height="327"></amp-img>
  <amp-img src="url-images/image3.jpg"
    width="660"
    height="327"></amp-img>
</amp-carousel>


Untuk ukuran silahkan sobat sesuaikan dengan mengganti angka 327 dan 660 sesuai kebutuhan sobat. Untuk  url-images/image1.jpg, url-images/image2.jpg dan url-images/image3.jpg silahkan sobat ganti dengan url gambar yang sudah diupload (dihosting). Kita bisa memanfaatkan fitur post pada blogger, Picasa, Photobucket, dan lain sebagainya.
5. Klik Simpan.

Itulah tutorial Cara Memasang Gambar Slide Pada Blog Valid AMP yang dapat saya sampaikan, semoga bermanfaat bagi sobat semua...


Disqus Comments