Cara Membagi Kolom Artikel Postingan

Cara Membagi Kolom Artikel Postingan - Sebenarnya kolom dalam sebuah artikel yang biasa anda tulis dapat dibagi menjadi 2 kolom bahkan lebih. Penerapan kolom artikel yang dibagi ini sering kita lihat pada sebuah media koran atau majalah.

Disini aku akan memperlihatkan sedikit tips dengan memanfaatkan aba-aba CSS column-width Property.

Terlebih dahulu silahkan anda terapkan aba-aba di bawah ini pada template

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

Dalam aba-aba diatas, nilai column-count aku 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 aba-aba 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, membisu ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

Maka balasannya akan terlihat menyerupai 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, membisu 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 embel-embel 3 kolom

Result

Cukup gampang bukan, selamat mencoba.


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

Tweet

Subscribe to receive free email updates: