Cara Mengatur Ukuran Lebar Gambar di Postingan Blog

Baca Juga

Cara Membatasi atau Mengatur Ukuran Lebar Gambar di Area Posting Blog (Single Post)

CB sering membuka blog, dengan template bawaan blogger, yang tampilan gambarnya kegedean, terlalu lebar, sehingga melebihi batas ukuran lebar area posting, menembus sidebar.

Hal itu terjadi karena gambar yang diupload melebihi lebar area posting. Misalnya, ukuran area tulisan 600px, tapi gambar atau foto yang diunggah sebagai ilustrasi atau pelengkap postingan lebih dari itu, misalnya 800px atau 1024  pixel.

Untuk mengatasinya, terutama bagi pengguna template bawaan blogger, maka tambahkan kode berikut ini di atas kode ]]> </ b: skin>

.post-body img {max-width:100%}

Cara Mengatur Ukuran Lebar Gambar di Postingan Blog

Berikut ini langkah detail membatasi ukuran gambar/foto di postingan blog

1. Klik "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode ]]> </ b: skin>
3. Copas kode berikut ini di atas ]]> </ b: skin>

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

4. Save!

Ini hasilnya:

Tampilan Gambar Sebelum Penambahan Kode

Tampilan Gambar Setelah Kode di atas Ditambahkan

Anda juga bisa mengatur ukuran lebar gambar ilustrasi posting itu menjadi 50% dari area yang ada, atau ukuran tepat, misalnya 300px. Ubah saja angka di width (100%) menjadi ukuran yang diinginkan.

Sebaiknya sih kita mengupload gambar dengan ukuran yang persis sama dengan maksimum lebar area posting atau ukuran gambarnya sesuai dengan yang akan dimunculkan.

Jangan lupa pula cara mengoptimalkan SEO Gambar di Posting Blog. Silakan baca:

1. Cara Pengoptimalan Gambar untuk SEO
2. Ukuran Gambar-Foto yang Benar untuk Posting Blog

Demikian Cara Mengatur Ukuran Lebar Gambar di Postingan Blog. Good Luck & Happy Blogging! (www.contohblog.com).*