Home » » Cara Mengatur Ukuran Lebar Gambar di Postingan Blog

Cara Mengatur Ukuran Lebar Gambar di Postingan Blog

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

 Ukuran Lebar Gambar di Postingan Blog

Tampilan Gambar Setelah Kode di atas Ditambahkan

 Ukuran Lebar Gambar di Postingan Blog


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).*

Thanks for reading & sharing Cara Mengatur Ukuran Lebar Gambar di Postingan Blog

Previous
« Prev Post

0 comments:

Comment Page:

Post a Comment

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox