Monday, March 11, 2013

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~

9 comments:

  1. nge! yang gw liatin kompie loe yang semuanya tulisan jepun!! auw auw auw!!!!! hiihihi

    ReplyDelete
    Replies
    1. Hahaha liat aja sih lu gil...
      Org sini ga ada pk OS english & keyboardnya jg beda, pdhl kita yg di indo aja serba English ya.. Jd kadang gw suka puyeng klo mo cari2 info krn gw ga tau bacanya apa & artinya apa hahaha...

      Delete
  2. wawww great postinggg..
    gw juga dari dulu penasaran sih kenapa bisa bgitu, kirain dari templatenya.. ternyata cuma saya saja yang gaptek html yah hahaha...
    thank youuu, nanti gw coba ah =D

    ReplyDelete
    Replies
    1. dulu bisa loh mel... ga perlu ngedit HTML asal muar sebaris gitu ga di align bisa berjejer. Kalo sekarang entah kenapa ga bisa, makanya penasaran trus dikasuh tau emang kudu begini. Ribet ya hahaha..
      Mending langsung pake pic monkey atau apa gitu bikin collage, cepet deh...

      Delete
  3. Aaaawww.... thanks ya Nge!!! Thank you bangeeettt.... Gw agak mumet sih bacanya. Gw salin ke buku, biar lebih menghayati, dan akhirnya (KAYANYA) gw ngerti sih. Gw belom coba, soalnya bacanya di kantor, hehehe.. Ntar kalo gw mentok, gw tanya lagi ya nge ya? Btw, lo kayanya ada yang salah. Bagian lo nulis contoh, itu "kode gbr1 disini"-nya keulang 2x. Gw sempet bingung terus mikir, abis itu gw nekat langsung lanjut aja ke bawah. Disitu gw baru ngeh kalo di bagian itu kayanya lo salah ngetik. Again, thanks ya ngeee!! Lo akan melihat karya gw segera!! Yeay :D

    ReplyDelete
    Replies
    1. Oh iya.. thank you di.
      Udah gw benerin ya hehehe... yg penting itu cm table-tr-td itu doang trus fotonya kudu ditaruh didalem si td ini... hehehe.

      Delete
  4. Gara2 liat blog nya candella dengan foto berjejer kayak gini, jadi maw nyoba. =) Udah di bookmark nih. Kalo pas posting nya sesuai, mau nyobain ahhh.

    Thanks for doing the detail tutorial. =)

    ReplyDelete
    Replies
    1. Moga2 postingannya ngga bikin bingung ya... soalnya susah buat milih kata2 yang tepat hehehe :)
      Thanks udah mampir juga~

      Delete
  5. Makasih tutorialnya, komplit sama gambar-gambarnya.. ^_^ Kalo di blog lain mah cuma ngasih tau pasang kode ini bla bla bleh, ngak tau mau ditaruh di hidung ato dimana kkkkkk tapi akhirnya aku tidak tersesat setelah menemukan blog ini. Warna blognya adem euy... ^_^

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...