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

Mengatasi Item Data Terstruktur Hilang atau Tidak Valid pada Blog AMP

Sekarang Google memfokuskan konten dengan blog AMP pada pencarian mobile. Salah satunya dengan adanya validasi data terstruktur pada pengujian AMP milik google. Yang tidak valid akan ada " Missing or invalid structured data item " di bagian bawah, bagi yang akun google-nya di setting bahasa indonesia maka akan menggunakan peringatan "Item data terstruktur hilang atau tidak valid". Tapi ketika di cek di pengujian data terstruktur tidak ada error sama sekali. Setelah saya amati ternyata ada yang salah dalam penempatan schema, yang tentunya tidak sesuai pedoman. Tapi bagi yang sering berkunjung di blog kompi ajaib milik kang adhy akan mendapatkan penyelesaian masalah seputar blog. Salah satu contohnya yang dibahas di posting ini. Di blog kompi ajaib dalam Memperbaiki Item Data Terstruktur yang tidak valid menggunakan cara yang agak rumit, lalu bagaimana bagi yang belum terlalu paham dengan kode HTML. Tidak harus mengubah semua struktur data, seperti pada tutorial komp...
9 komentar
Baca selengkapnya

Melihat Perangkat yang Terhubung ke Jaringan Wi-Fi

Apakah jaringan atau Wi-Fi Anda berjalan lambat? Banyak perangkat dan aplikasi yang berbeda terhubung ke jaringan, dan hanya perlu satu perangkat atau aplikasi tersembunyi untuk memperlambat jaringan.Gunakan GlassWire untuk Melihat Aplikasi dan Perangkat Apa yang Memperlambat Jaringan Anda. Pertama instal aplikasi GlassWire untuk Windows . Setelah menginstal dan terbuka GlassWire klik tab "Things" untuk melihat daftar semua perangkat yang saat ini ada di jaringan. Kemudian dapat menuju ke menu GlassWire kiri atas dan pilih "Settings" kemudian klik "Security", lalu klik "Unlock" dan kemudian di bawahnya pilih "Things monitor" (yang paling atas). Sekarang centang kotak yang mengatakan " Notify me about network device activity " dan pilih " Report only new unknown devices ". GlassWire kemudian akan memberi tahu kapan saja perangkat baru yang tidak dikenal bergabung dengan jaringan. Lihat Apa yang Terhubung ke PC Secara ...
Posting Komentar
Baca selengkapnya

Apa itu Timeline di Windows 10, apa Fungsi dan Penggunannya

Timeline adalah bagian dari Task view Windows 10. Ini menunjukkan riwayat aktivitas yang telah dilakukan dan bahkan dapat menyinkronkan aktivitas di seluruh PC. Fitur ini tersedia di Windows 10's April 2018 Update. Ini juga dapat bekerja dengan aplikasi seluler yang di kaitkan dengan akun Microsoft, sehingga ketika melihat dokumen Word di iPhone atau ponsel Android maka akan muncul di Timeline pada PC. Cara Membuka Timeline Untuk membuka Task View, klik ikon "Task View" di taskbar sebelah kanan kotak Cortana. Jiak tidak ada mungkin pernah menyembunyikannya, unttuk menampilkan kembali, klik kanan taskbar dan klik "Show Task View Button". Task View juga dapat dibuka dengan menekan Windows + Tab pada keyboard Anda. Timeline muncul di jendela yang sedang terbuka. Gulir ke bawah untuk melihat daftar aktivitas baru-baru ini. Bilah gulir di sisi kanan memungkinkan untuk menggulung kembali hari-hari sebelumnya. Aktivitas yang yang ditampilkan tidak semuanya, hanya aplik...
Posting Komentar
Baca selengkapnya