Level: Advanced
Nomor tutorial: 011
Theme WordPress yang kita gunakan tidak semuanya menyediakan fasilitas peletakan gambar yang rapi pada saat kita membuat artikel posting. Awalnya gambar tersebut akan terletak diatas dari teks posting yang tentu saja tidak seperti yang biasa kita lihat disurat kabar atau majalah. Posisi yang kita inginkan adalah gambar berada didalam teks tersebut seperti menyatu satu sama lain atau inline (Gambar 1). Terus bagaimana dong?? Jangan kuatir, kita bisa kok menambahkan fasilitas ini dengan mudah dengan sedikit mengedit file CSS dari theme yakni style.css.
Gambar 1. Gambar Inline dengan Teks
Pada Dashboard klik Appearance dan lalu pilih editor (Gambar 2. Editor), yang akan membawa kita ke halaman Edit Themes.
Gambar 2. Editor
Untuk dapat mengedit file style.css, klik tombol link-nya yang biasanya berada disebelah kanan paling bawah (Gambar 3. Link Stylesheet). Apabila kita tidak diperbolehkan mengedit halaman style.css yang ditandai dengan teks: You need to make this file writable before you can save your changes. See the Codex for more information, maka silahkan dipelajari solusinya pada tutorial Mengakses file Themes WordPress.
Gambar 3. Link Stylesheet
Oke sekarang kita tinggal menambahkan selector dan value berikut ini:
#img.alignright{
margin: 3px 0 10px 2px;
padding: 4px;
border: 1px solid #ededed;
diplay:inline;
}
#img.alignleft{
margin: 3px 2px 10px 0;
padding: 4px;
border: 1px solid #ededed;
diplay:inline;
}
.alignleft{
float:left;
}
.alignright{
float:right;
}
Agar perubahan menjadi permanen jangan lupa untuk men-save dengan menekan tombol 
. Selanjutnya pada saat kita memasukan gambar pada artikel, kita tinggal menambahkan attribute class=”alignleft” jika posisi gambar ada di sebelah kiri dan class=”alignright” untuk sebelah kanan. Contoh penulisannya seperti berikut:
<img class=”alignleft” src=”url dari gambar kita” …dan seterusnya… />
Bagi yang belum tahu cara memasukan gambar ke dalam artikel baca tutorial Memasukan Gambar artikel di postingan WordPress. Give it a try!!…
