Cara Membuat Gambar di Postingan Blogger Valid AMP

.

Update baru cara mengatur Gambar di Postingan Blogger Valid AMP serta responsive dengan lebih mudah dan lebih sederhana, lihat artikelnya berikut: Cara Mengatur Gambar AMP di Postingan supaya Responsive.

Blog AMP memiliki struktur yang spesial dari blog biasa. Dan sekarang sudah banyak para blogger yang menggunakan blog AMP, termasuk juga di platform blogger.com yang walaupun belum mendukung.

Dalam menggunakan AMP di blogger memang harus berusaha dalam mengatur gambar supaya valid AMP. Kalau template blog tinggal mengunduh dari para pembuat template, karena banyak juga yang share template support AMP secara gratis dan desain yang bagus.

Membuat Gambar di blog AMP

Dalam menyusun gambar AMP di postingan itu cukup mudah, hanya saja harus teliti juga apalagi yang gambarnya lebih. Gambar pun juga harus di tata dengan rapi dan sesuai, supaya blog terlihat lebih nyaman.

Setidaknya dalam mengelola blog AMP, harus bisa mengatur postingan agar valid AMP. Utamanya dalam mengatur gambar. Posting ini akan menjelaskan tutorial dengan rinci agar lebih mudah dalam memahami.

Strukturnya saya buat sendiri dengan referensi dari situs lain. Pertama di awali dari mengedit struktur htmlnya, ketika menyelipkan gambar akan terdapat berstruktur seperti ini.

<div class="separator img-w400"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAszIW0TTf-bzUkP2nbfUHOi_hcLAAVs6ac97vOsllmQQOQI0ZWtuZgzrjvQUbb3SF9AgnZG8fzjL8rRAWWcou9broasw7_220mK7U-vmf8dj2BIyconzS37RJiB6YmZNah3DxjI1I41U/s1600/PC+Windows+10.jpeg"><img data-original-height="900" data-original-width="1600" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAszIW0TTf-bzUkP2nbfUHOi_hcLAAVs6ac97vOsllmQQOQI0ZWtuZgzrjvQUbb3SF9AgnZG8fzjL8rRAWWcou9broasw7_220mK7U-vmf8dj2BIyconzS37RJiB6YmZNah3DxjI1I41U/s320/PC+Windows+10.jpeg" width="320" /></a></div>

Dalam gambar yang dimasukkan pasti akan terdapat link, untuk menghilangkannya klik gambar kemudian klik tombol link. Selanjutnya atur besar kecil gambar. Jika semuanya sudah selesai, baru melakukan perubahan ke dalam struktur AMP maka akan menjadi seperti ini.

Select All

<div class="separator img-w"><amp-img data-original-height="900" data-original-width="1600" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAszIW0TTf-bzUkP2nbfUHOi_hcLAAVs6ac97vOsllmQQOQI0ZWtuZgzrjvQUbb3SF9AgnZG8fzjL8rRAWWcou9broasw7_220mK7U-vmf8dj2BIyconzS37RJiB6YmZNah3DxjI1I41U/s320/PC+Windows+10.jpeg" width="320"></amp-img></div>

Dari contoh di atas sudah jelas dalam perbedaannya, mana yang harus dihapus dan diganti, contohnya menghapus style inline yang tidak boleh ada dalam element style="clear: both; text-align: center;".

Membuat Gambar AMP Responsif

Tahap kedua mengatur gambar agar bisa responsive, karena kode di atas masih belum responsive jika tampilan blog diciutkan (gambar tidak sesuai dengan lebar layar). Maka harus meletakkan tag layout="responsive" pada gambar. Dan jadinya akan seperti ini.

Select All

<div class="separator img-w"><amp-img data-original-height="900" data-original-width="1600" height="180" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAszIW0TTf-bzUkP2nbfUHOi_hcLAAVs6ac97vOsllmQQOQI0ZWtuZgzrjvQUbb3SF9AgnZG8fzjL8rRAWWcou9broasw7_220mK7U-vmf8dj2BIyconzS37RJiB6YmZNah3DxjI1I41U/s320/PC+Windows+10.jpeg" width="320"></amp-img></div>

Sekarang gambar sudah responsive. Tapi masih ada kendala lagi yaitu ketika layar dalam keadaan lebar, gambar juga akan melebar melebihi ukuran aslinya dan menyesuaikan lebar elemen di luarnya. Itu dapat membuat gambar menjadi buram.

Maka untuk mengatasi masalah ini solusinya adalah dengan menggunakan atribut style max-width. Ukuran dari max-width tergantung dari lebar (width) gambarnya. Dalam menentukan max-width itu berapa, kita bisa lihat pada atribut width pada gambar. Masukkan style CSS di bawah ini ke dalam style amp-custom pada kondisional halaman postingan.

Select All

.separator{clear: both; text-align: center;margin: 0 auto;}.img-w200{max-width:200px;}.img-w250{max-width:250px;}.img-w300{max-width:300px;}.img-w320{max-width:320px;}.img-w400{max-width:400px;}.img-w450{max-width:450px;}.img-w500{max-width:500px;}.img-w600{max-width:600px;}.img-w640{max-width:640px;}.left{clear: left; float:left;width: 100%;}.right{clear: right; float:right;width: 100%;}@media screen and (max-width:640px){.img-w450.left,.img-w450.img-right{clear:both;float:none;margin:1em auto;text-align:center;}}@media screen and (max-width:420px){.img-w300.left,.img-w300.right,.img-w320.left,.img-w320.right,.img-w400.left,.img-w400.right{clear:both;float:none;margin:1em auto;text-align:center;}}

Sekarang kembali mengatur struktur gambarnya, tambahkan salah satu CSS di atas tadi yang sesuai dengan lebar gambar, dan letakkan pada element div atribut class (setelah separator). Di sini saya mengambil contoh img-w320, artinya dengan lebar gambar adalah 320px. Demikian pula dengan ukuran yang lain.

Select All

<div class="separator img-w320"><amp-img data-original-height="900" data-original-width="1600" height="180" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAszIW0TTf-bzUkP2nbfUHOi_hcLAAVs6ac97vOsllmQQOQI0ZWtuZgzrjvQUbb3SF9AgnZG8fzjL8rRAWWcou9broasw7_220mK7U-vmf8dj2BIyconzS37RJiB6YmZNah3DxjI1I41U/s320/PC+Windows+10.jpeg" width="320"></amp-img></div>

Untuk meletakkan gambar di samping kiri tinggal menambahkan left pada atribut class dan untuk kanan gunakan right. Posting selanjutnya akan membahas cara untuk mempercepat membuat struktur amp pada postingan.