Cara Mudah Memperbaiki Posisi Gambar Pada Postingan Blogger Versi Mobile

Pada kesempatan kali ini saya akan memberikan tips Cara Mudah Memperbaiki Posisi Gambar Pada Postingan Blogger Versi Mobile. Karna beberapa saat lalu saya baru menyadari bahwa posisi gambar postingan blog saya jika di lihat pada versi tampilan mobile ternyata terlalu mepet kekanan tidak lah berada di tengah seperti biasanya. Mungkin hal ini terjadi karna blogger melakukan update versi terbarunya. 

Setelah mencoba beberapa cara, sampai saat ini saya hanya menemukan satu-satunya solusi yang paling mudah, efektif dan efisien untuk di terapkan dalam mengatasi posisi gambar postingan yang terlalu mepet ke kanan. 

Yaitu dengan menambahkan kode di area CSS template blog anda. Jadi bagi anda yang masih binggung simak ulasan di bawah ini. Jadi ada beberapa opsi yang kalian bisa terapkan pada blog anda, silahkan pilih salah satu. 

Cara Mudah Memperbaiki Posisi Gambar Pada Postingan Blogger Versi Mobile 

Opsi Pertama kita hanya perlu menambahkan .post-body img pada kode yang telah ada caranya seperti berikut ini : 

1. Buka akun blogger anda Pilih menu tema dan klik edit html 

2. Lalu cari kode berikut ini

.post-body img {

3. Lalu ubah atau tambahkan kode tersebut menjadi seperti ini

.post-body img {display:block;width:100%;height:auto;}

4. Setelah itu silahkan simpan perubahan template blog tersebut 

Opsi Kedua dilakukan bila anda kesulitan mencari .post-body img anda bisa menambahkannya kode berikut di atas ]]></b:skin> atau </style> :

1. Buka akun blogger anda Pilih menu tema dan klik edit html 

2. Lalu cari kode berikut ini ]]></b:skin> atau </style>

3. Lalu tambahkan kode dibawah ini di atas ]]></b:skin> atau </style> :

.post-body img {display:block;width:100%;height:auto;}

4. Setelah itu silahkan simpan perubahan template blog tersebut 

Opsi Ketiga dilakukan bila anda ingin melakukan perbaikan tampilan postingan gambar yang lebih spesifik pada versi mobile yang bermasalah. Yang perlu dipahami adalah anda harus mengetahui di ukuran media screen berapa tampilan tersebut bermasalah misal yang di pakai max-width:384px, max-width:720px dan seterusnya. Untuk penerapannya sebagai berikut ini : 

1. Buka akun blogger anda Pilih menu tema dan klik edit html. 

2. Lalu cari kode berikut ini

@media screen and (max-width:xxxpx) { ... 

3. Misalnya @media screen and (max-width:384px) Lalu ubah atau tambahkan kode tersebut menjadi seperti ini :

@media screen and (max-width:384px) { .post-body img {display: block;float:center; width:100%;height:auto;}.......dst

4. Setelah itu silahkan simpan perubahan template blog tersebut 

Tampilan Gambar Posting setelah di perbaiki 

Setelah memilih salah satu opsi di atas dan menerapkannya, sekarang coba anda akses postingan blog anda pada versi mobile. Seharusnya tampilannya sudah normal kembali dan tidak mepet kekanan seperti sebelumnya. 

Jadi sekian tutorial bagaimana Cara Mudah Memperbaiki Posisi Gambar Pada Postingan Blogger Versi Mobile. Semoga informasinya bermanfaat dan sampai jumpa pada tutorial selanjutnya.