Rabu, 02 Mei 2012

Gunakan css max-width


Hai gan berhubung gak ada posting yang bisa di bahas mending sekarang saya share hal kecil mengenai gambar di postingan ok jadi gini pernahkah anda meng-upload gambar di postingan dengan ukuran besar..? sampai - sampai ukuran gambarnya melewati area postingan..? coba lihat screenshot di bawah ini.

Sebelum di terapkan css max-width

Nah jika kita menerapkan max-width pada gambar di postingan kita maka gambar akan mengikuti lebar sesuai / bahkan kurang dari lebar area postingan kita nah coba sekarang lihat gambar di bawah ini. inilah yang di maksud penerapan max-width pada gambar.

Setelah di terapkan css max-width

Nah gambarnya sedikit mengecil. oke sekarang coba masuk ke dalam Editor Template blog anda dan cari kode .post img jika ada silahkan tambahkan kode max-width: 98%; sebelum kode penutup css yang tandanya seperti ini }. saya beri ilustrasi seperti ini.

.post img {
...
...
max-width: 98%;
}

Jika tidak ada kode .post img simpan saja kode di bawah ini di atas kode ]]></b:skin>

.post img {
max-width: 98%;
}

Sudah beres tinggal klik SIMPAN TEMPLATE. kenapa 98% karena untuk berjaga - jaga saja jika postingan anda mempunyai padding karena jika 100% bisa saja nanti agak kelewatan gambarnya karena menggunakan padding jadi di ambil saja 98% ok sekian dan semoga bermanfaat.