Cara Mengatur Lebar Gambar Otomatis Di Postingan Blogger

Saat melakukan postingan di blog terkadang ukuran gambar default blogspot membuat kesal karena ukurannya tidak sesuai dengan lebar blog kita.

Ukuran-ukuran default blogspot adalah small (kecil), medium (sedang), large (besar), x-large (lebih besar) dan original size (ukuran pixel gambar yang sebernarnya).

Yang membuat kesal adalah ketika memasang gambar dengan ukuran large ternyata masih kecil, namun jika memasang gambar dengan ukuran x-large gambar malah kelebihan (melewati batas halaman posting) apalagi jika memasang yang original size, walah :D

Nah pada kesempatan kali ini saya akan memberikan cara yang sangat sederhana dan mudah sekali untuk mengatasi masalah lebar gambar pada postingan blogger ini. Dengan cara ini walaupun anda menyetting gambar dalam ukuran x-large bahkan original size sekalipun gambar akan tetap pada posisinya dan tidak melewati batas halaman posting. Kalau bahasa gaulnya gambar yang responsive.

Baiklah langsung saja pada tutorialnya, seperti biasa, silahkan login ke halaman beranda blogger. Setelah login masuklah pada beranda blog anda dan buka menu edit html. Pada halaman edit html silahkan cari kode di bawah ini:

]]></b:skin>

Jika kode di atas sudah ketemu, silahkan tambahkan kode css di bawah ini tepat di atas kode ]]></b:skin> lalu simpan settingan template anda.

.post img { vertical-align:bottom; max-width:100%; max-height:100% }

Setelah settingan tersimpan silahkan buat posting baru dan upload lah gambar yang dimensi di atas 900px atau yang melebihi ukuran lebar halaman posting blog anda. Lalu ubahlah ukuran tersebut menjadi x-large lalu priview dan lihat apa yang terjadi. Yap, gambar berada tepat di tengah posting dengan tersisa margin kanan dan kiri sebanyak 0%.

Lalu coba anda ubah lagi ukuran gambar anda menjadi original size dan priview, bagaimana? gambar tetap berada di tengah bukan walaupun settingannya original size. Jika anda merubah ukuran gambar menjadi large, normal, dan small maka gambar akan semakin kecil namun batas maksimal gambar akan tetap 100% (kanan dan kiri tersisa masing-masing 0%).

Gambar di atas sudah saya setting dengan lebar 100% di css jadi anda bisa merubah angka pada width dan height sesuka hati, saya menggunakan angka 100% karena lebarnya sesuai dengan blockqoute pada template ini. Itulah cara paling sederhana, efektif dan termudah dalam mengatasi ukuran gambar pada postingan blog, semoga artikel ini dapat berguna dan bermanfaat. Tekan ctrl + d untuk bookmark halaman ini, jangan lupa baca artikel menarik yang lainnya ya. Salam blogger.

Subscribe to receive free email updates: