Posting Seperti Koran Atau Majalah

Mari belajar membuat tampilan posting seperti tampilan berita di dalam koran. Seperti yang kita ketahui bahwasannya koran menampilkan berita dalam bentuk pargraf yang terbagi dalam beberapa kolom. Hal ini adalah ciri khas yang terdapat pada koran yang tidak pernah lekang di makan rayap. Coba perhatikan paragraf di bawah ini! Ini adalah contoh paragraf yang bergaya koran (News Paper Style)

A kangaroo is an animal found only in Australia, although it has a smaller relative, called a wallaby, which lives on the Australian island of Tasmania and also in New Guinea.
Kangaroos eat grass and plants. They have short front legs, but very long, and very strong back legs and a tail. These are used for sitting up and for jumping. Kangaroos have been known to make forward jumps of over eight metres, and leap across fences more than three metres high. They can also run at speeds of over 45 kilometres per hour.
The largest kangaroos are the Great Grey Kangaroo and the Red Kangaroo. Adult grow to a length of 1.60 metres and weigh over 90 kilos.
Kangaroos are marsupials. This means that the female kangaroo has an external pouch on the front of her body. A baby kangaroo is very tiny when it is born, and it crawls at once into this pouch where it spends its fi rst fi ve months of life.

Untuk membuat postingan sobat blogger seperti Koran, sobat blogger cukup memberikan kode css pada area postingan. Ini kode CSS yang digunakan :

<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">
Letakkan tulisan sobat blogger disini...!!!
</div>

Kode CSS di atas bisa dikostumisasi sesuai keinginan sobat blogger.
Keterangan singkat dari kode CSS di atas :
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
  1. Angka 3 adalah jumlah kolom dari posting, silahkan di rubah dan disesuaikan dengan template sobat.
  2. Kode warna pemisah kolom (Warna garis) adalah #ff0000; silahkan diganti menggunakan kode warna yang lain. Untuk melihat kode Warna silahkan lihat salah satu posting dari blog ini.
  3. Teks warna merah disesuaikan juga dengan teks sobat

Tidak ada komentar: