Cara Memperbaiki Posisi Gambar Postingan Blog Tampilan Mobile

Santos el Salam

3 Februari 2020

Saat memutuskan untuk mengganti tema blog, saya sempat mencoba beberapa template untuk saya pilih menjadi tampilan blog saya yang baru. Dengan memasangnya pada blog saya satunya yang memang sering saya jadikan tempat belajar otodidak untuk memahami beberapa fungsi kode pada template blog, saya coba memilih mana kiranya yang paling cocok untuk dipasang di blog saya ini. Beberapa template ini saya unduh dari tema-tema gratisan (bukan bawaan blogspot) yang banyak dibagikan oleh para blogger terpercaya sehingga aman dipakai tanpa efek samping berbahaya bagi blog. 

Sebenarnya semua template tersebut memiliki tampilan bagus-bagus dan punya kelebihan masing-masing, baik dari segi SEO, Responsive dan kecepatan loadingnya.

Namun dari mencobanya satu persatu dan mengamati tampilan pada blog, ada beberapa saya menemukan tampilan gambar pada postingan blog versi mobile yang membuat saya kurang sreg karena gambar tidak berada di tengah alias salah satu sisinya mepet ke pinggir layar. Mungkin ada di antara anda pembaca sekalian yang mengalami masalah seperti ini. Contoh tampilannya seperti berikut ini:

Perlu diketahui bahwa tampilan gambar tidak rata alias mepet ke samping layar ini biasanya hanya terjadi pada halaman postingan blog, sementara pada halaman beranda (home), tampilan gambarnya tidak ada masalah.

Dan perlu diketahui pula bahwa masalah ini juga hanya terlihat pada tampilan layar mobile (hp), sementara jika diakses lewat komputer (web) atau dibuka lewat tablet, tampilan gambarnya sudah betul alias rata tengah dan terlihat rapi. Namun jika diubah ke layar versi mobile, tampilan gambar tersebut tiba-tiba posisinya berubah menjadi tidak rata.

Sebenarnya bagi yang kurang jeli, hal ini tidak begitu kentara. Namun saat dicermati saat mengakses lewat seluler, tampilan gambar ini terlihat kurang nyaman sehingga mesti diperbaiki. Terlebih pengakses blog pada zaman sekarang banyak juga berasal dari kalangan pengunjung via handphone, atau bahkan lebih banyak pengaksesnya lewat seluler sehingga tampilan blog responsive dan mobile friendly juga harus diupayakan dan diutamakan agar blog kita semakin ramah bagi pengguna mobile dan disukai oleh semua kalangan pengunjung. 

posisi gambar diperbaiki

Bagaimana cara memperbaikinya? Berikut solusi dari saya untuk anda terapkan jika mengalami masalah seperti ini. 

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Backup template terlebih dulu jika perlu. 

4. Letakkan kode simpel berikut ini di area CSS template blog anda. 

.post-body img {display: block;float:center;width:300px;height:auto;}

Keterangan: ukuran 300px bisa anda ubah dan sesuaikan dengan ukuran pada blog anda, atau kalau bingung biarkan saja.

Sebenarnya, anda bisa saja meletakkan kode tersebut pada area global script CSS template blog anda. Namun jika ingin secara spesifik perbaikan pada versi mobile saja yang memang bermasalah, anda bisa terlebih dahulu mencari lokasi penempatan script CSS untuk ukuran responsive layar mobile yang ada pada template tersebut. Untuk mencari tahu bisa dilihat dengan mencari kode seperti berikut ini:

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

Hal ini juga perlu diperhatikan karena pada kasus tertentu seperti yang pernah saya temui saat mencoba beberapa template, penerapan kode ini di area CSS global justru tidak bekerja, atau mungkin berhasil memperbaiki masalah pada tampilan mobilenya, namun tampilan versi webnya justru berubah menjadi tidak rata alias tampilan gambar gantian bermasalah.

Agar tidak terjadi hal demikian, maka tentukan dulu secara spesifik ukuran responsive untuk layar mobile pada area CSS template anda. Dari beberapa yang saya temui ternyata ukurannya berbeda-beda. Ada yang pakai max-width:384px, ada max-width:960px, dan mungkin ada lagi ukuran-ukuran lainnya. 

Untuk menentukannya anda bisa mencobanya satu persatu ukuran tersebut agar menemukan yang tepat. Misal untuk percobaan anda memilih ukuran @media screen and (max-width:384px), maka letakkan kode dari saya di atas setelahnya, sehingga menjadi seperti berikut ini:

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

5. Silahkan simpan kembali template blog anda. 

Jika setelah dicoba akses via mobile, tablet, dan web ternyata posisi gambar postingan masih bermasalah, maka pilih ukuran responsive lainnya. Coba satu persatu dengan penerapan seperti di atas sampai menemukan yang tepat. Setelah mendapati tampilan gambar pada postingan sudah sempurna sesuai yang diinginkan baik untuk versi mobile, tablet dan web, maka itulah penempatan yang anda cari. Demikian. Semoga bermanfaat.

Update! Cara termudah dan tidak perlu ribet mencari kode ukuran responsive. Ukuran gambar akan menyesuaikan dengan lebar postingan. Silahkan gunakan kode di bawah ini dan letakkan di dalam area CSS global. Bisa juga anda letakkan di atas kode ]]></b:skin> atau </style>. Berikut kodenya:

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

Labels: Blogging

Thanks for reading Cara Memperbaiki Posisi Gambar Postingan Blog Tampilan Mobile. Please share...!

Facebook

Twitter