Cara Membagi Kolom Dalam Artikel di Postingan Blog

Cara Membagi Kolom Dalam Artikel di Blog adalah artikel yang akan saya share pada kesempatan kali ini, fitur ini bisa kamu lihat seperti kamu membaca majalah. Disini cukup menggunakan CSS agar bisa membagi artikel dalam dua colum bagaimana caranya berikut ini saya akan bagi kan. 

Terlebih dahulu silahkan anda terapkan kode di bawah ini pada template

.bagidua
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

Dalam kode diatas, nilai column-count saya beri 2 yang berarti artikel post akan terbagi menjadi 2 kolom. Jika anda menginginkan beberapa kolom misal 3 kolom maka tentukan nilai column-count dengan angka 3.

Simpan template.

Kemudian untuk penerapan pada postingan, silahkan salin dan bungkus artikel anda dengan kode di bawah ini.

<div class='bagidua'> TULISAN ANDA TERAPKAN DISINI </div>

Contoh penerapan

<div class='bagidua'>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, velfaucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

Maka hasilnya akan terlihat seperti ini

Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, velfaucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Demo selengkapnya dengan tambahan 3 kolom

• Result

Cukup mudah bukan, selamat mencoba.

Referensi : http://www.w3schools.com/cssref/css3_pr_column-width.asp

Share :