Cara Mengatur Ukuran Gambar Tampilan Mobile Agar Sesuai Lebar Postingan Blog Secara Otomatis

Pengakses internet pada masa kini lebih didominasi oleh pengguna seluler (mobile). Oleh karenanya bagi para pengelola website atau blog juga perlu untuk mendesain blog atau websitenya agar semakin ramah ketika diakses lewat mobile. Selain template harus responsive dan mobile friendly, tampilan dalam postingan blog juga mesti disesuaikan. Salah satu di antaranya adalah tampilan gambar. Penggunaan gambar dalam postingan biasanya berfungsi untuk menggambarkan isi postingan agar mudah dipahami oleh pengunjung blog. 


Saat kita mengupload sebuah gambar dalam postingan, biasanya kita gunakan ukuran gambar secara acak tanpa ada standar ukuran yang kita tentukan. Maka ketika artikel diakses lewat mobile, biasanya tampilan gambar ada yang mengalami beberapa masalah. Ada tampilan gambarnya kebesaran atau ada juga yang ukurannya melebihi lebar layar ponsel. Tampilan seperti itu pastinya akan mengganggu kenyamanan pembaca blog kita. Oleh karenanya, perlu bagi kita untuk mengatur tampilan gambar agar bisa menyesuaikan dengan lebar layar ponsel (mobile). Kita bisa gunakan cara manual, tapi pasti akan merepotkan jika harus merubah ukuran setiap gambar. Bisakah kita merubah ukuran setiap gambar yang telah kita posting agar sesuai dengan lebar ponsel secara otomatis?. Jawabannya bisa dan cukup mudah caranya. Anda bisa mengikuti tutorial berikut ini.
Cara berikut ini telah saya praktekan di blog ini (santossalam.blogspot.com). Cara ini juga bisa membuat gambar yang ukurannya kurang lebar atau bentuk portrait agar menjadi responsive menyesuaikan lebar layar. Adapun Langkah-langkahnya sebagai berikut:

1. Login ke akun blogger anda

2. Buka Dashboard pilih Template dan klik Edit HTML

3. Back-up terlebih dulu jika perlu untuk menghindari kesalahan pemasangan kode, setelah itu cari kode ]]></b:skin> atau kode </style>

4. Letakkan kode berikut ini tepat diatas kode ]]></b:skin> atau </style> dan kemudian klik simpan tema

.mobile .post-body img {width: 100%!important;height: auto!important;}


Keterangan: 

width: 100% adalah pengaturan agar gambar tampil sebesar 100% (menyesuaikan lebar layar atau teks postingan). Jika gambar terlalu kecil, maka otomatis gambar akan diperbesar sesuai lebar layar (100%), dan jika gambar kebesaran akan dikecilkan agar muat sesuai layar sebesar 100%. Anda juga bisa mengganti angka 100% sesuai dengan selera anda. Dengan penambahan “.mobile”, script ini tidak akan bekerja pada tampilan web browser, melainkan hanya bekerja pada tampilan mobile.  

Sekian. Semoga bermanfaat.

Artikel Terkait