Artikel Blog Yang Berkolom-kolom

Artikel seperti dalam koran atau majalah dapat kita buat dalam sebuah artikel blog, bentuk tulisan ini seperti tulisan pada koran atau majalah yang berkolom-kolom, banyaknya kolom bisa kita atur sesuai dengan kebutuhan yang kita perlukan dalam penulisan sebuah artikel blog.

Untuk membuat tulisan yang berkolom-kolom kita menggunakan perintah css yang menurut saya sederhana dan pendek, kurang lebih seperti ini css yang kita pergunakan untuk membuat artikel blog kita menjadi berkolom-kolom.

column-count: 3;
column-gap: 30px;

column-count mengindikasikan banyaknya kolom yang akan kita buat dalam sebuah artikel yang akan kita tulis, sedangkan column-gap merupakan jarak antara kolom yang satu dengan kolom lainnya.

Sebagai contoh kita akan aplikasikan penggunaan column-count dan column-gap tersebut, untuk menerapkannya kita harus membuat nama id atau class untuk kolom tersebut.

Sebagai contoh kita menggunakan id dengan nama koran, sehingga cssnya menjadi seperti ini:

#koran {
column-count: 3;
column-gap: 30px;
}

dan html yang kita pergunakan menjadi seperti ini:

<div id="koran">isi artikel</div>

Dan kurang lebih hasilnya menjadi seperti ini, dalam hal ini baik dilayar besar atau dilayar kecil seperti layaknya layar mobile hasilnya akan menjadi tetap tiga kolom.

Hasil dengan tiga kolom pada layar kecil akan membuat yang membaca arikel ini akan kesulitan, kita bisa saja mengubah kolom yang banyaknya tiga kolom ini menjadi satu kolom pada layar mobile dengan menambahkan @media-screen untuk layar mobile ukuran tertentu ( untuk bahasan @media-screen bisa mencari literatur di tempat yang lain, karena saya tidak membahasnya).

Dengan artkel yang berkolom-kolom ini kita bisa kasih tambahan style seperti garis pembatas antar tiap kolom dan kita juga bisa memberikan warna pada garis pembatas tersebut.

oh iya hampir lupa jenis garis pun bisa kita sesuaikan dengan selera kita.

Untuk menambahkan garis pembatas kita bisa menambahkan css ini:

column-rule: 4px double blue;

Nilai column-rule 4px merupakan tebalnya garis, double merupakan jenis garis yang dipergunakan, masih ada beberapa jenis pilihan untuk jenis garis ini sepeti contoh dotted atau dashed, kalian bisa menentukan sendiri jenis garis ini, sedangkan blue merupakan warna garis.

Bagaimana Menerapkanya

Kita bisa menerapkan css ini bisa hanya dalam satu halaman post saja atau pada keseluruhan halaman post.

Satu Halaman Post

Menerapkan hanya pada satu halaman saja dalam postingan blog, kita bisa langsung masukan css ini pada halaman post pada mode html

<style type="text/css">
#koran{
column-count: 3;
column-gap: 30px;
column-rule: 4px double blue;
}
</style>
<div id="koran">ISI ARTIKEL</div>

Seluruh Halaman Post

Sebenarnya sama saja dengan menerapkan pada satu halaman post, cuma sedikit perbedaannya terletak pada css nya kita simpan dalam template pada pada urutan css dan untuk memanggilnya tetap menggunakan html ini:

<div id="koran">ISI ARTIKEL</div>

Ketika kita menulis artikel jangan lupa dalam mode html ya.

Tambahan

Selain dengan kode css diatas, kita bisa menggunakan kode css ini

columns: 50px 4;

Nilai 50px merupakan nilai minimal lebar tiap kolom dan 4 merupakan nilai maksimum banyaknya kolom.

Semoga tulisan ini bisa bermanfaat dan mudah untuk dimengerti.