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. (Baca juga: Cara Menghilangkan Bingkai/ Border pada Gambar Postingan Blog)
Sekian. Semoga bermanfaat.
Labels:
Blogging
Thanks for reading Cara Mengatur Ukuran Gambar Tampilan Mobile Agar Sesuai Lebar Postingan Blog Secara Otomatis. Please share...!
sudah dicoba kenapa tidak jalan ya?
BalasHapusKode ini hanya untuk versi mobile. Jika kode pengaturan di atas sudah diterapkan dan tidak ada yg ketinggalan, harusnya bisa berfungsi. Mungkin anda bisa coba ubah pengaturan widthnya. Atau kalo msih tidak berfungsi coba pindah pemasangannya. Pasang kode itu di bawah kode yang seperti body .mobile .main-inner (di bawah kode css mobile)
HapusTerima kasih scriptnya
BalasHapussangat berguna
Sama-sama, terima kasih kunjungannya.
Hapuskalau gambar posting ukuran penuh mepet layar gimana scriptnya gan, terima kasih
BalasHapusMungkin maksudnya biar work (mepet layar) versi mobile juga versi webnya kali ya, tinggal ganti saja kode di atas menjadi:
Hapus.post-body img {width: 100%!important;height: auto!important;}
Atau bisa juga pake ini:
.post-body img {display:block;width:100%;height:auto;}
Letakkan seperti cara di atas (area CSS global)
gak ada kode ]]>. Kalau gitu gimana min???
BalasHapusTaruh saja di atas kode style penutup CSSnya gan, sama aja.
Hapusmakasi banyak bantuannya bos, sukses selalu
BalasHapus.post-body img {width: 100%!important;height: auto!important;}
work
Sama-sama bos, semoga kita semua mendapat kesuksesan.
Hapus