Membagi Dua Kolom Elemen Posting

Bagan Elemen

Umumnya elemen posting memiliki satu kolom. Sekarang tindakan apa yang dapat kita lakukan agar kolom posting itu menjadi dua? Sebelum memulai trik tersebut, alangkah baiknya jika kita memahami mengapa sebuah kolom menjadi dua. Pengkoloman terjadi apabila tersedia ruang kosong — biasanya — disebelah kiri pada sebuah elemen dasar, sehingga elemen di bahwahnya akan mengisi ruang kosong tersebut. Sedangkan elemen dasar tersebut harus memperlihatkan struktur inline & penempatan bernilai relatif agar — nantinya — mudah untuk dikustomisasi. Salah satu contoh penerapan adalah pada posting Membuat Template Blog Hasil Karya Sendiri di bagian akhir tentang cara membuat tiga kolom sejajar dalam elemen footer yang ditandai dengan selector .supplementary.

Langkah awal untuk memulai tutorial ini ini adalah kita harus mengetahui struktur elemen pembentuk posting tersebut, contoh untuk elemen posting template bawaan Blogger™:

<div class="widget Blog" id="Blog1"><!-- widget posting -->
  <div class="blog-posts hfeed"><!-- memulai posting dengan microformat (hfeed) -->
    <div class="date-outer"><!-- posting sesuai tanggal terbit, dapat berisi lebih dari satu posting -->
      <div class="date-posts"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
        <div class="post-outer"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
          <div class="post hentry"><!-- elemen ini dapat digunakan untuk membagi dua kolom -->
    
  … dan seterusnya …

Seperti kata sebuah ungkapan, Sebaik-baik jalan adalah ditengah-tengah, maka kita akan mengambil elemen <div class="post-outer"> sebagai pembagi. Syaratnya format tanggal header di non-aktifkan.

konfigurasi tanggal header

Perhatikan lebar (width) elemen pembentuk widget posting, seperti main-content, main-content .widget, #main, #main .widget, dan sebagainya. Hal ini akan memudahkan kita untuk menentukan lebar elemen posting, apabila menggunakan jenis fixed layout. Contoh:

#main .widget {
  margin-right: 15px;
  overflow: hidden;
  width: 600px;
  word-wrap: break-word;
}

Catatan: kode di atas menunjukkan bahwa lebar elemen yang ditempati oleh sejumlah posting adalah sebesar 600px. Sebagai tambahan kita juga semestinya mengetahui margin-left elemen sidebar agar memperoleh hasil yang seimbang. Kira ambil contoh margin-left elemen sidebar sebesar 15px dan berada di sebelah kanan #main-content.

Tata Letak Posting Satu Kolom

Dengan kondisi awal kode CSS pada .post-outer adalah sebagai berikut:

.post-outer {
  margin: 15px;
  width: 570px; <!-- 600px - 15px (margin-left) - 15px (margin-right) -->
}

Catatan: kode CSS di atas merupakan contoh & bila tidak ada pada pengkodean template Anda, kemungkinan terdapat pada .post atau selector lain. Properti width juga bisa tidak disertakan.

Untuk merubah elemen posting blog menjadi dua, kita perlu mengkonfigurasi ulang .post-outer. Dengan rincian seperti yang ditunjukkan pada kode berikut ini.

.post-outer {
  display: inline;
  float: left;
  position: relative;
  margin: 15px;
  width: 270px; <!-- {600px - 30px (2× margin-left) - 30px (2× margin-right)} ÷ 2 kolom -->
}

Catatan: .post-outer harus diperlakukan tanpa border, untuk menjaga struktur pengkodean yang telah kita tentukan di atas. Sebaiknya penambahan border & pernak-pernik lain ditambahkan pada .post dan hal inilah yang saya sebut memudahkan kustomisasi pada catatan sebelumnya.

Tata Letak Posting dua Kolom

Terakhir tambahkan <div class='clear'></div> tepat di bawah penutup <div class="post-outer"> untuk menjaga & mengikat pengkoloman yang telah kita buat.

<div class="widget Blog" id="Blog1">
  <div class="blog-posts hfeed">
    <div class="date-outer">
      <div class="date-posts">
        <div class="post-outer">
          <div class="post hentry">
    
  … dan seterusnya …
 
          <div><!-- .post -->
        <div><!-- .post-outer -->
        <div class='clear'></div>
      <div><!-- .date-posts -->
    <div><!-- .date-outer -->
  <div><!-- .blog-posts -->
<div><!-- .Blog #Blog1 -->

Catatan: untuk pengaturan CSS (Cascading Style Sheets) <div class='clear'></div> dapat kita temui pada posting Membuat Template Blog Hasil Karya Sendiri dengan kode ditandai warna biru.

Trik atau toturial yang telah dijelaskan di atas tidak mutlak harus demikian serta tergantung pada struktur pengkodean pada masing-masing template. Dan jika ditelaah, maka kita akan menemukan kode/kata kunci untuk membuat suatu elemen mempunyai letak yang sejajar (dalam baris tertentu), yakni display: inline;, float: left;, position: relative;, dan mungkin width.

15 komentar untuk “Membagi Dua Kolom Elemen Posting”

  1. Waaah.. sebenernya ini sangat bermanfaat mas.. tapi menurut saya sih, kayanya banyak yang ga ngerti dan ga bisa nerapinnya, kayanya cuma di mengerti sama orang yang tau koding aja ini ma hehe

    BalasHapus
    Balasan
    1. Blogger™ tidak menyediakan ini, sehingga mau tidak mau/terpaksa buka “edit HTML” untuk mengorek kode sumbernya. Yah, hitung-hitung untuk belajar tentang CSS dan HTML. :)

      Hapus
  2. hemm,,,begitu ya caranya,,kayaknya agak ribet ya,,

    BalasHapus
  3. wahh baru tahu niih gan ,,biasanya postingnya pake 1 kolom ajjha hehe,,thnks ya

    BalasHapus
  4. udah di coba kok gak bisa ya?

    BalasHapus
    Balasan
    1. Banyak hal yang menyebabkan membagi dua kolom padaelemen posting tidak dapat diterapkan, antara lain: kita belum tahu berapa lebar sebenarnya untuk area #main .widget (#Blog1), penggandaan kode pasa tiap elemen yang behubungan dengan elemen posting, dan belum memahami struktur pengkodean template blog yang kita kelola. Sebenarnya salah satu trik mudah agar kita mengetahui struktur pengkodean adalah dengan menggunakan fasilitas “periksa elemen” (Inspect element) pada peramban, seperti yang dijelaskan pada posting Optimalisasi Fungsi Peramban dalam Blogging. :)

      Hapus
  5. ribet tapi mnarik tuk di coba......

    BalasHapus
  6. Wah menarik juga nih. Jadi seperti membaca e-book reader! Bagaimana jika sewaktu-waktu kita ingin melihat blog kita di monitor yang resolusi nya lebih besar atau mungkin lebih kecil? Apakah elemen dua kolom tersebut akan otomatis menyesuaikan?

    THANKS.

    BalasHapus
    Balasan
    1. Posting di atas khusus untuk membuat posting dalam bentuk dua kolom, sedangkan apabila ingin membuat tampilannya hampir mirip/sama dengan aslinya, kita dapat menggunakan media queries yang relatif mudah dalam hal kustomimasi template yang dilihat pada layar yang berbeda, sepertipada posting Menerapkan Desain yang Responsif.

      Hapus
  7. thx gan infonya, maanfaat banget dehh :D

    BalasHapus
  8. gan? selain membuat menjadi dua kolom, yang bisa membuat blog kita makin baeutifful apa gan?

    BalasHapus
    Balasan
    1. Banyak faktor yang mempengaruhi — terutama gaya pengkodean — seperti pewarnaan, irama vertikal teks, keteraturan struktur, keterbacaan, dan sebagainya.

      Hapus
  9. makasih atas tutorialnya sob :)

    BalasHapus
  10. kode ini yang ane cari, tapi agak ribet juga ya keliatannya, tapi gak apalah, kita gak akan tau ribet atau enggaknya sebelum dicoba, makasih infonya gan,

    BalasHapus