Salam ceria dan salam mesra semua. Kali ni saya nak kongsi bersama tips yang agak ringkas mengenai skala imej di dalam sesebuah blog. Pasti ada diantara kita yang kerap kali menggunakan imej yang agak besar skalanya dalam penulisan masing-masing. Perkara ini kadangkala membawa kecatatan kepada template yang digunakan. Sedar tak sedar, imej yang pada asalnya disusun atur dengan kemas semasa menaip, tetapi telah terkeluar dari sempadan template apabila catatan tersebut dipaparkan (published).

Tutorial kali ini, kita kongsi bersama pengalaman untuk mengkonfigurasi imej yang kita muat-naik kedalam blog supaya imej ini tidak terkeluar dari landasan. Terlebih dahulu, sila login ke dashboad anda, seterusnya ke bahagian Appreance –> Editor.

Daripada sini, sila klik Stylesheet (style.css). Kebiasannya, paparan asal memang menunjukkan pilihan Stylesheet (default view).

Seterusnya, cari code:- .post img { … } sekiranya code ini tidak terdapat dalam fail style.css anda, sila buat penambahan yang pada barisan yang baru. Saya syorkan kamu menambah dibawah .post, .post ul, ataupon dibawah kategori /* – Post style – */

Dah jumpe mana nak letak? Jadi masukkan code dibawah ini:-

.post img {
max-width: 90%;
border: 1px dotted;
}

Sedikit penerangan ringkas

  • .post img { .. } – adalah code yang berada di dalam HTML iaitu <img src=””> Kod .pos img ini hanya akan mengconfigurasi imej yang berada di dalam post sahaja. Ia tidak akan menggagu mana-mana imej lain di dalam blog anda.
  • max-width: 90%; – adalah jumlah saiz lebar maksimum yang dibenarkan untuk setiap imej yang kita masukkan. Sekiranya imej tersebut lebih besar lebarnya, HTML akan secara automatiknya mengecilkan imej ini mengikut tetapan yang telah diberikan oleh CSS.
  • Border: 1px dotted; – pula adalah untuk menambah bingkai pada gambar tersebut. 1px beerti ketebalan bingkai. Manakala dotted adalah jenis bingkai titik-titk. Sekiranya anda ingin mengubah kepada garisan terus (lines) anda boleh tukar kepada solid.
  • Tambahan: Sila pastikan anda tidak tertinggal simbol simbol seperti:- titik dua bertindih ( : ) dan titik koma ( ; ).

update[1]Dah siap, jangan lupa simpan (save) hasil kerja anda dengan menekan butang [UPDATE FILE]. Seterusnya cuba lihat semula perbezaannya pada laman anda. Selamat mencuba~

Nota: Banyak perkara yang kita tahu, makin banyak pula yang kita kekurangan. Tips ini untuk mereka yang baru nak bermula dengan WordPress dalam sesi mencantikkan blog. Kepada sesiapa yang dah advance, sila beri tunjuk ajar pulak ye. Terima kasih Malaysia.

Link to this post!