Cara Merubah lebar gambar di Blog agar menyesuaikan lebar layar mobile

Ketika kamu upload foto pada postingan, otomatis blog akan menyesuaikan dengan lebar halaman kamu, biasanya menjadi pilihan medium, atau original size jika ukuran foto lebih kecil dari halaman kamu. Nah, dari tampilan di Web browser yang kita gunakan di Computer memang tidak terlihat terjadi masalah, tetapi karena menurut statistik, pengunjung raihanjaya.net juga banyak dari mobile atau perangkat selular, maka tampilan foto itu terkadang ada yang kebesaran atau melebihi lebar layar ponsel.
Memang sih tidak mengganggu, tetapi penggunaan scroll membuat pengunjung akan merasa kerumitan saat membaca sementara ia juga ingin melihat gambar.
Saya search di google hampir tidak menemukan caranya, sehingga saya putuskan untuk memodifikasi sendiri script bahasa code-code tersebut, awalnya saya tambahkan "mobile='yes'" pada penggalan codenya, eh ternyata tidak bekerja, tidak menyerah coba lagi cara lain, beberapa kali mencoba trial dan error akhirnya, ketemu juga, simpel cukup tambahkan ".mobile" pada script yang nanti akan kita bagikan di sini.
Posting ini bertujuan agar teman-teman yang ingin tampilan di gadgetnya bisa optimal dan lebih mudah dipandang mata, karena dari web ini, ternyata saya lihat di hp saya, masih banyak gambar yang melewati batas layar meskipun sedikit.
Kode yang saya temukan di internet adalah sebagai berikut:

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

Nah, kamu cukup menambahkan ".mobile" pada bagian depan script di atas

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

Oke, kita mulai cara memasangnya:

1. Login ke blogger kamu
2. Buka Dashboard > Template > Edit HTML
3. Back-up dulu kalo perlu untuk menghindari kesalahan pemasangan kode
4. Setelah itu cari kode ini melalui CTRL + F pada lembar script HTML : ]]></b:skin>
5. Letakkan tepat diatas ]]></b:skin> dengan copy paste kode dibawah ini:

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

Yuk kita pelajari dulu maksud kode diatas:

• Tanpa penambahan ".mobile" kode diatas juga dapat bekerja pada template kamu, hanya saja sepertinya pengaturan otomatis lebar dan tinggi gambar pada blog sudah bagus untuk tampilan web browser di komputer
• width: 80% adalah pengaturan agar gambar tampil sebesar 80% dari lebar halaman, jika gambar terlalu kecil, maka gambar akan diperbesar 80% dari halaman, dan jika kebesaran gambar akan dikecilkan agar muat di layar sebesar 80%
• Kamu bisa mengganti angka 80% sesuai dengan selera kamu
• Dengan penambahan ".mobile" script ini tidak bekerja pada tampilan web browser, tetapi akan bekerja pada tampilan mobile

Selamat mencoba...