Bagi Anda yang menggunakan tema Blogger responsive, baik tema hasil modifikasi sendiri maupun tema responsive bawaan Blogger terbaru, mungkin pernah menemukan masalah pada gambar postingan ketika blog dibuka melalui perangkat mobile.
Saat gambar postingan menggunakan ukuran Besar atau Sangat besar, posisi gambar terkadang terlihat sedikit bergeser ke kanan sehingga tidak sejajar dengan area teks postingan. Akibatnya, tampilan artikel menjadi kurang rapi, terutama pada layar smartphone yang memiliki lebar terbatas.
Masalah tersebut biasanya berkaitan dengan adanya separator atau margin pada elemen gambar Blogger yang membuat sisi kanan dan kiri gambar tidak menyesuaikan dengan lebar area postingan.
Untuk mengatasinya, Anda dapat menambahkan kode CSS sederhana ke dalam template Blogger. CSS ini berfungsi menghilangkan margin pada bagian kiri dan kanan separator gambar sehingga gambar dapat terlihat lebih rata dengan area postingan.
Cara Membuat Gambar Postingan Rata Kanan dan Kiri di Mobile
Berikut langkah-langkah yang dapat Anda ikuti.
1. Masuk ke Dashboard Blogger
Pertama, silakan masuk ke dashboard Blogger menggunakan akun Google yang digunakan untuk mengelola blog Anda.
2. Buka Menu Tema
Setelah masuk ke dashboard Blogger, pilih menu Tema.
Kemudian klik tanda panah di samping tombol Sesuaikan atau gunakan opsi Edit HTML, tergantung tampilan dashboard Blogger yang Anda gunakan.
3. Cari Kode CSS
Setelah halaman Edit HTML terbuka, cari kode berikut:
]]></b:skin>
Untuk mempermudah pencarian, Anda dapat menggunakan fitur pencarian pada editor HTML dengan menekan Ctrl + F pada komputer.
4. Tambahkan Kode CSS
Letakkan kode CSS berikut tepat di atas kode ]]></b:skin>:
.separator a {
margin-left: 0px !important;
margin-right: 0px !important;
}
Dengan kode tersebut, margin kiri dan kanan pada separator gambar akan dihilangkan sehingga posisi gambar menjadi lebih rapi dan sejajar dengan area postingan, khususnya pada tampilan mobile.
5. Simpan Tema
Setelah kode ditambahkan, klik Simpan untuk menyimpan perubahan pada template Blogger.
Selanjutnya, buka salah satu artikel blog menggunakan smartphone dan periksa posisi gambarnya. Jika sebelumnya gambar terlihat bergeser ke kanan, seharusnya sekarang posisi gambar sudah lebih rata dengan area postingan.
Kesimpulan
Masalah gambar postingan yang terlihat tidak rata pada tampilan mobile dapat terjadi karena adanya margin pada elemen separator gambar Blogger.
Anda tidak perlu mengubah kode HTML setiap gambar secara manual. Cukup tambahkan CSS diatas tersebut ke dalam template.
Setelah kode disimpan, gambar pada postingan akan memiliki posisi yang lebih rapi dan sejajar dengan area konten blog.