Bagaimana Cara Mengubah Ukuran Gambar Pada Post

Tutorial dasar pertama adalah tentang perubahan ukuran gambar menggunakan kode yang tidak rumit yaitu menggunakan kode sebagai berikut.

width="ukuran gambar"
height="ukuran gambar"

dan

width:ukuran gambarpx;
height:ukuran gambarpx;

Perbedaan yang saya ketahui dari keduanya adalah, untuk kode yang pertama dipergunakan pada kode IMG. Contoh <img width="100" height="100" src="URL gambar"/>

Angka 100 merupakan ukuran yang akan diterapkan pada gambar, misal gambar yang anda punya berukuran 500x500 pixel, jika anda menggunakan kode tersebut dan mengisinya dengan angka 100 maka ukuran gambar akan berubah menjadi 100x100 px.

Contoh langsung, lihat gambar berikut.

Ukuran gambar 256x256

Saya akan merubah gambar ini menjadi 100x100, gunakan kode yang saya sudah berikan diatas, width="100" height="100".

Hasilnya akan menjadi kecil, tetapi tidak merubah gambar aslinya. Silahkan anda buka gambar 100x100 ini di new tab, caranya klk kanan pada mouse anda, lalu open image in new tab. Maka hasilnya akan berukuran sebesar 256x256, persis sama dengan gambar yang pertama.

Lanjut membahas kode yang kedua

Kode kedua biasanya digunakan pada ID atau class, ya saya juga tidak begitu mengerti. Yang pasti kode ini tidak bisa digunakan untuk IMG.

Untuk ID biasanya ada pada template blog anda, contoh :

#post-img {width:100px; height:100px;} --> Ingat bahwa setelah angka harus ada tulisan px atau % ini memang sudah menjadi suatu bagian.

Berikut contoh class :

.img {width:100px; height:100px;}

Perbedaan class dan ID adalah (.) dan (#). ID menggunakan (#), sedangkan class menggunakan (.)

Jika anda ingin merubah seluruh gambar dengan ukuran yang sama, misalnya 100x100px. Maka anda hanya perlu mencari ID post anda. Biasanya kode tersebut adalah sebagai berikut.

#post img {}


Caranya klik rancangan atau design, kemudian anda pilih Edit HTML.
Anda akan melihat kode template anda, untuk memudahkan pencarian silahkan tekan Ctrl+F. lalu ketik #post img.


Jika sudah menemukan kode seperti diatas silahkan anda tambahkan kode yang saya berikan tadi sehingga kode menjadi seperti dibawah ini.

#post img {width:100px; height:100px;}

Lalu save template anda. Dan hasilnya semua gambar yang anda post maka akan berukuran 100x100 pixel.