Cara yang Benar Memasukkan gambar blog AMP Agar Valid dan Responsive
HopeWe - Cara yang Benar Memasukkan gambar blog AMP Agar Valid dan Responsive | Ada yang bilang penerapan blog AMP menjadi valid untuk platform blogspot itu 'ribet', saya akui itu iya, tapi di awal-awal, karena tidak mengerti dalam penerapan sesuai dengan aturan yang benar seperti apa, namun setelah Anda mempraktekkannya ternyata tidak juga. Salah satu yang menjadi masalah adalah penerapan atau memasukkan gambar pada blog AMP agar benar-benar valid dan responsive.
Image atau gambar merupakan salah satu elemen yang penting pada sebuah artikel, namun pada blog AMP ini ternyata merupakan salah satu penyebab para blogger enggan untuk mempergunakan template versi AMP pada platform blogger, karena artikel yang sudah terpublish sebelum penerapan template AMP terdapat gambar di dalam artikel harus dilakukan pengeditan agar valid secara struktur data sewaktu dicek mempergunakan AMP Validator.
Saya sendiri bingung kenapa platform blogger yang dikembangkan google malah tidak menyediakan tools khusus blog AMP agar secara struktur data valid AMP. Berbeda degan Wordpress hanya dengan plugging AMP secara otomatis blog atau website akan menyesuaikan struktur data yang mampu valid AMP.
Untuk memecahkan masalah ini, agar struktur data AMP Valid tidak terjadi error pada postingan artikel blog, Anda dapat menerapkan langkah berikut, sebelum menambah atau memasukkan gambar pada artikel.
Cara yang Benar Memasukkan gambar blog AMP Agar Valid dan Responsive
Silahkan masukkan kode CSS berikut
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
dan simpan pada Tema blogger di bagian edit HTML, simpan pada bagian bawah
Selanjutnya, insert image atau masukkan gambar pada mode compose seperti biasa, kemudian dalam penerapan gambar pada artikel postingan blog agar valid AMP simpan kode berikut ini dalam mode HTML.
Simpan kode berikut dekat gambar yang tadi Anda masukkan, agar mempermudah mengcopy-paste link url gambarnya saja.
<amp-img src="/img/amp.jpg"
width="300"
height="169"
layout="responsive"
alt="an image"></amp-img>
</div>
Pada mode HTML akan terlihat seperti ini
<a href="https://2.bp.blogspot.com/-NmgtxkDa-4E/XDIaIQnYC9I/AAAAAAAAAEM/D4tekIok3dA7DjtmMejLPwFIKwHamxbJgCEwYBhgL/s1600/Picture1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="404" data-original-width="606" src="https://2.bp.blogspot.com/-NmgtxkDa-4E/XDIaIQnYC9I/AAAAAAAAAEM/D4tekIok3dA7DjtmMejLPwFIKwHamxbJgCEwYBhgL/s1600/Picture1.png" /></a></div>
Maka penerapan gambar pada postingan blog valid AMP yang benar seperti berikut ini
<amp-img src="https://2.bp.blogspot.com/-NmgtxkDa-4E/XDIaIQnYC9I/AAAAAAAAAEM/D4tekIok3dA7DjtmMejLPwFIKwHamxbJgCEwYBhgL/s1600/Picture1.png"
width="606"
height="404"
layout="responsive"
alt="Cara memasukkan gambar pada blog AMP Agar Responsive dengan Benar"></amp-img>
</div>
dan hasilnya akan seperti ini, gambar terlihat responsive dan tidak terlihat buram saat penggunaan perangkat yang berbeda.
Ada beberapa catatan yang perlu Anda ketahui, untuk "img-width" merupakan lebar gambar yang akan di masukan sesuaikan dengan lebar gambar yang mendekati atau lebih dari 300, 400, 500 atau 600 pixel. Contoh di atas saya mempergunakan gambar dengan "width 606" itu artinya saya harus mempergunakan <div class="img-width-600 img-center">.
Baca Juga: Cara Mudah Mengatasi Pesan Error AMP Validator pada Template VioMagz-AMP, yang Sering Terjadi
Dalam hal pengaturan posisi gambar center, left atau right ganti pada bagian <div class="img-width-600 img-center">, sesuaikan posisi yang diinginkan.
Sedangkan untuk ukuran gambar width dan height, harus Anda sesuai dengan ukuran gambar yang akan di masukkan, seperti terlihat pada gambar di bawah ini dengan mempergunakan OS Windows 10.
Terakhir isi tulisan yang diberi warna pada alt="an image"> dengan kata kunci alt yang di inginkan.
Saya yakin di awah mempraktekkan ini terasa ribet yaah? namun seiring waktu berjalan penerapan gambar dengan cara ini akan lebih mudah dan secara struktur gambar valid AMP dengan kualitas yang baik dan responsive dan tentunya akan berdampak positif pada kualitas blog yang Anda kelola.
Semoga saja dalam waktu dekat platform blogger sudah support AMP, serta tidak menyulitkan pengguna awam untuk melakukan editing pada blog mereka.
Demikian Cara yang Benar Memasukkan gambar blog AMP Agar Valid dan Responsive, Yuukk di share ke berbagai media sosial mungkin belum bermanfaat bagi sobat, namun bisa jadi temanmu lebih membutuhkan.
