Cara Membuat Posting Seperti Koran

Ketika kita membaca sebuah koran atau majalah sering kita temui susunan tulisan dengan kolom-kolom terpisah yang tentu bila tulisan sebuah berita terlalu panjang dengan memisah-misah tulisan dengan kolom ini akan mempermudah pembaca supaya tidak terlalu lelah untuk membaca berita tersebut.

Dan tulisan dengan gaya kolom ini sekarang sudah banyak yang juga menerapkan pada media online seperti blog atau situs terutama situs majalah atau magazine kamu akan melihat beberapa kolom pada posting untuk memperjelas bagaimana hasil posting seperti koran kamu bisa melihat contoh dibawah ini:

Selamat datang di blog yang sederhana ini semoga apa yang saya tulis bermanfaat untuk kamu, saya banyak memposting yang berkaitan dengan dunia blogging dan juga internet. Kawan pada posting kali ini saya akan share cara membuat posting seperti majalah atau koran nah, ini adalah contoh posting yang seperti koran kerenkan bila kamu mau juga membuat seperti ini juga ikuti saja tutorial ini.

Dalam contoh diatas kamu melihat posting terbagi tiga kolom dan bisa juga kita jadikan menjadi dua kolom untuk mengetahui trik ini berikut ini kode yang bisa dipakai:

<style type="text/css">
.koran{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>

<div class="koran">Text posting disini</div>

Untuk menerapkan kode ini kamu tinggal masukkan kode pada halaman HTML posting dan kamu sisipkan text diantara "tag div", yang sudah saya beri warna merah.Untuk mengganti jumlah kolom kamu ganti angka "3" menjadi angka "2" contohnya seperti ini:

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;


Nah, untuk mempercantik kamu bisa memberikan garis pemisah antara kolom dengan kode dan garis pemisah ini juga akan membuat nyaman bagi pengunjung situs kamu:

-moz-column-rule-style:outset; /* Firefox */
-webkit-column-rule-style:outset; /* Safari and Chrome */
column-rule-style:outset;

-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;

Maka kode lengkapnya seperti ini:

<style type="text/css">
.koran{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule-style:outset; /* Firefox */
-webkit-column-rule-style:outset; /* Safari and Chrome */
column-rule-style:outset;

-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;}
</style>
<div class="koran">Text posting disini</div>

Contoh hasil penerapan kode ini:

Selamat datang di blog yang sederhana ini semoga apa yang saya tulis bermanfaat untuk kamu, saya banyak memposting yang berkaitan dengan dunia blogging dan juga internet. Kawan pada posting kali ini saya akan share cara membuat posting seperti majalah atau koran nah, ini adalah contoh posting yang seperti koran kerenkan bila kamu mau juga membuat seperti ini juga ikuti saja tutorial ini.

Catatan:
Bila kamu ingin memisah menjadi beberapa kolom atas atau bawah misalnya posting atas kamu buat tiga kolom sedangkan kolom bawah dua kolom, maka pada kode ".koran" kamu bisa tambah huruf atau angka menjadi ".koran1" begitu seterusnya pada kolom posting yang lain.

* * *

Yap, semoga tutorial "Cara Membuat Posting Seperti Koran" ini bisa berguna untuk kamu, bila kamu butuh bantuan silahkan tanya pada kolom komentar dan dengan segera akan saya balas -insya Allah-