Cara Membagi Artikel Postingan Menjadi 4 Kolom

Membagi kolom pada postingan blog kadang dibutuhkan untuk satu keperluan. Seperti di blog ini, saya membagi kolom dalam satu halaman untuk membuat tampilan utama yang simple. Memang untuk beberapa kondisi tentunya membagi kolom artikel blog tidak diperlukan, misalnya untuk blog dengan niche film atau movie dan mp3 (Download).

Namun, untuk beberapa kondisi, misalkan blog kamu mempunyai niche berita atau review  suatu produk, tentunya sangat diperlukan membagi artikel postingan menjadi bebrapa kolom. Hal ini dilakukan untuk membuat pengunjung blog kamu menjadi betah berlama-lama membaca artikel panjang.

Apalagi jika dipadukan dengan teknik mempercantik artikel postingan lainyya, misalnya menyisipkan Tabs atau According atau memvariasikan artikel blog kamu dengan tombol button dengan style yang berbeda.

Nah, adapun caranya sangat mudah, kamu hanya perlu menyisipkan artikel kamu di dalam kode yang akan saya berikan di bawah ini. Kemudian isikan artikel kamu ke dalam kode yang tersedia. Berikut adalah cara untuk membuat Artikel Postingan Menjadi 4 Kolom.

Baca Juga: Cara Membuat Daftar Isi (TOC) Di Postingan Blog

1. Satu Kolom

Ini merupakan contoh langsung jika artikel kamu hanya berupa satu kolom, Biasanya artikel bawaan blogger merupakan satu kolom, jadi kamu tidak perlu lagi memasukkan kode berikut jika kamu hanya menginginkan artikel menjadi satu kolom

<div class="tl-cols">
<div class="col1">Col content ....</div>
</div>

2. Dua Kolom

Sebenarnya kode untuk membuat artikel blog menjadi dua kolom merupakan pengembangan dari kode satu kolom, yang kamu lakukan hanya menambah jumlah kodenya, sehingga otomatis menjadi kode untuk dua kolom

Artikel yang terbgi mejadi dua kolom sering kita lihat ada di media cetak seperti koran dan majalah. Umumnya artikel dengan dua kolom dilakukan jika artikel yang kamu miliki sangat panjang, dan dimungkinkan jika hanya satu kolom, maka artikel kamu akan di scrool sangat panjang ke bawah.

<div class="tl-cols">
<div class="col2 pull-left">
<div class="tl-first-col">Col content ...</div>
</div>
<div class="col2 pull-right">
<div class="tl-second-col">Col content ...</div>
</div>
</div>

3. Tiga Kolom

Sama seperti penjelasan dua kolom, ini juga merupakan kode pengembangan dari kode satu kolom

Seperti yang sedang kamu lihat saat ini, ini merupakan kode untuk 3 kolom, dan langsung saya terapkan pada tulisan ini

Artikel dengan tiga kolom sangat memaksimalkan penglihatan karena hemat ruang blog karena pembaca tidak perlu lagi mencroll artikel kamu sampai ke bawah

<div class="tl-cols">
<div class="col3 pull-left">
<div class="tl-col3-1">Col Content ...</div>
</div>
<div class="col3 pull-left">
<div class="tl-col3-2">Col Content ...</div>
</div>
<div class="col3 pull-left">
<div class="tl-col3-3">Col Content ...</div>
</div>
</div>

4. Empat Kolom

Ini meupakan contoh langsung untuk artikel empat kolom

Artikel yang sangat panjang bisa kamu siasati dengan menggunakan kode-kode ini

sehingga, artikel kamu terlihat sangat ramping

Akibatnya, pembaca tentunya sangat senang untuk berama-lama membaca artikel kamu

<div class="tl-cols">
<div class="col4 pull-left">
<div class="tl-col4-1">Col content ...</div>
</div>
<div class="col4 pull-left">
<div class="tl-col4-2">Col content ...</div>
</div>
<div class="col4 pull-left">
<div class="tl-col4-3">Col content ...</div>
</div>
<div class="col4 pull-left">
<div class="tl-col4-4">Col content ...</div>
</div>
</div>

Bagaimana, tertarik untuk tidak membuat membuat pembaca blog kamu bosan?. kmau hanya tinggal mengkopi kode yang saya berikan di atas. Ingat pembaca blog kamu merupakan nomor 1, karena tanpa mereka, blog kamu tidak akan ada artinya, jadi buatlah mereka betah dan berlama-lama di blog maku. Sekian