Gambar Berjajar di Blog

Waktu kemarin-kemarin ini, Candela ada nanyain tentang gimana caranya supaya gambar di blog bisa diatur berjajar dua kolom seperti gambar di bawah ini. Soalnya sejak blogger berubah versi seperti yang sekarang ini, kita kudu milih alignment buat naruh gambar antara (left, center, right). Bahkan kalau pilih no alignment(apus alignment secara manual di HTML code nya) pun entah kenapa ngga ngaruh & tetep ngga bisa naruh beberapa gambar dalam satu baris. Jadi aku coba cari tau dan ternyata harus pake sistem table. Jadi mungkin tips berikut bisa dicoba, agak rempong sih.

Step 1.

Upload gambar ke blog(bisa lewat HP atau komputer), lalu atur urutan tampilannya & besarnya sesuai yang kita mau. Sayangnya kalau lewat HP, aku ga bisa set mau ditampilin segede apa, pasti sudah otomatis, lalu urutannya juga sesuai urutan upload & posisi ditengah. Kalau lewat komputer, bisa lebih banyak pilihan. Aku biasa pilih ukuran Medium atau Small untuk tampilannya.

Step 2.

Seperti gambar di bawah, mari kita puter otak sedikit dengan coding HTML ya.

Step 3.

Buat pemula, copy semua kode yang ada ke 2 Notepad. Yang notepad1 yang nantinya bakal kita edit, sedangkan yang satu lagi untuk jaga2 aja kalau sampai salah2 masih ada backup yang versi original. Kalau udah jago, ngga perlu copy ke Notepad langsung hajar di HTML codenya.

Step 4.

Karena gambar yang satu dengan yang lain ada new line, otomatis pas liat codenya kita jadi tau kalau yang di dalem <div> sampe </div> itu maksudnya satu gambar. Jadi berhubung ada 2 gambar yang mau disejajarin, kita bakal bikin table dengan 2 kolom. Trus aku lebih suka kalau formatnya 1 table itu 1 baris & 2 kolom, jadi kalau lain kali ada perubahan lebih enak ngaturnya. Cuma kalau yang udah jago bisa semua gambar dibikin banyak kolom dan baris. Caranya bagaimana?

<table> : buat mulai bikin table nah didalemnya bakal ada baris & kolom (ditutup dengan </table>)

<tr> : buat mulai bikin baris, nanti didalemnya ada kolom (ditutup dengan </tr>)

<td> : buat mulai bikin kolom, nanti didalemnya diisi gambar (ditutup dengan </td>)

Ini urutannya ga boleh salah ya... Jadi kalau mau

1 baris & 2kolom :

<table><tr><td>kode gbr1 disini</td><td>kode gbr1 disini</td></tr></table>

1 baris & 3kolom :

<table><tr><td>kode gbr1 disini</td><td>kode gbr2 disini</td><td>kode gbr3 disini</td></tr></table>

Tips : kadang disisi2 gambar waktu kita upload ke blogger, otomatis ada jarak disisi2 gambar (disebut margin). Krn aku lebih suka klo gbrku rapet2 & ditengah, ini semua aku hapus waktu edit di notepad, caranya :

"Ctrl + H" lalu tulisan berikut : style="margin-left: auto; margin-right: auto; atau yang seperti ini : style="margin-left: 1em; margin-right: 1em;" aku taruh di bagian searching trus aku replace all langsung tanpa diisi apa2 dibagian replace. Jadi otomatis semua bakal kehapus.

Step 5.

Semua space & new line yang ngga penting aku apus. Jadinya gambar aku bakalan rata semua & ga jomplang kiri kanan. Kalau seperti yang contoh dibawah ini, bakal ada sedikit jarak antar baris.

Step 6.

Copy Code yang sudah diedit & timpa ke code yang ada didalam HTML blog, lalu click kembali bagian compose & lihat apa hasilnya sudah rapi atau belum. Jangan lupa untuk di Preview untuk double check apa gambarnya udah oke gedenya di layar blog kita atau engga.

Saran aku kalau sudah mulai ngutak ngatik HTML : lain kali kalau ganti design blog diusahain lebar untuk bagian tulisan kita jangan sampai jadi lebih kecil, karena gambarnya bakal keluar dari jalur. Jadi kalau bisa tetep konsisten aja templatenya, jangan gede kecil atau kalau engga gambarnya yang jangan gede2.

Semoga pada ngerti ya.... mohon maap kalau bahasanya susah ditangkep :) Tapi kalau ada yang mau nanya-nanya(kasih saran atau masih ngga ngerti) silahkan bisa lewat komentar di bawah.

Ciao~