Langsung ke konten utama

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.

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a...
44 komentar
Baca selengkapnya

Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO. Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema. Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog ...
19 komentar
Baca selengkapnya

Blogger Related Post AMP Ringan Dengan Multi Label

Sekarang sudah banyak orang yang menggunakan blog amp . Untuk blogger masih belum support AMP, tapi walau belum support amp Blogger bisa dibuat support amp. Dalam hal related post dan comment sudah di atasi oleh Kang Ismet dan Adhy Suryadi agar support amp dengan menggunakan amp-iframe. Update! sekarang blogger sudah bisa untuk HTTPS pada Custom Domain. Baca dan lihat tutotialnya di Blogger Mendukung Https untuk Custom Domain . Dalam related post kebanyakan hanya menggunakan satu label seperti milik kompiajaib yang menggunakan FeedWind, bahkan saya belum tau untuk yang multi label. Sekarang akan membahas related post dengan label lebih dari satu (multi label) atau berlabel banyak. Kisah pembuatannya Yang ini boleh dilewati!... 😉😏 Dalam pembuatan related post ini awalnya saya hanya mencoba-coba karena saya berfikir bahwa mungkin bisa untuk multi label dan ternyata hasilnya sukses. Dalam hal ini butuh waktu yang sangat lama karena saya juga masih belajar menggunakan javascript. Pertam...
23 komentar
Baca selengkapnya