6 Jul 2014

Membuat Tampilan Kolom Koran dengan CSS

Dalam seni ngeblog, ada kalanya ingin membuat blogazine. Blogazine adalah gaya ngeblog yang menurut beberapa narablog keren. Sayangnya saya tidak sepakat jika blogazine keren. Hal ini karena membuat desain yang umum itu lebih susah dan banyak pertimbangan dibandingkan dengan hanya mendesain satu halaman blogazine saja.

Kecenderungan orang yang ngeblog dengan gaya blogazine, kontennya kurang kuat. Berbeda dengan blog yang desainnya umum, biasanya sudah fokus pada konten karena desain sudah selesai.

Dalam blogazine terkadang memakai gaya penulisan layaknya koran. Dengan CSS, kamu bisa membuat tampilan kolom-kolom layaknya koran. Bagaimana caranya? Penasaran, bukan? Berikut ini adalah ulasannya.

Gaya Kolom Koran dengan CSS

Untuk membuat tulisan bergaya kolom koran, CSS menyediakan properti "column-count". Untuk pengguna Mozilla Firefox menggunakan prefiks "-moz", untuk pengguna Google Chrome menggunakan prefiks "-webkit". Berikut ini adalah contohnya:

See the Pen wEFsb by Iskandar Dzulkarnain (@iskael) on CodePen.


Untuk mengatur jarak antarkolomnya menggunakan properti "column-gap". Mudah, 'kan? Selamat mencoba :)

6 komentar:

  1. info yang menarik. ternyata sederhana sekali.
    terima kasih :)

    BalasHapus
    Balasan
    1. sama2, berasa komennya mas komen spam yah :D

      Hapus
  2. terima kasih. sy sdh sering terapkan beginian

    BalasHapus
  3. code itu ditulis di sebelah mana...?

    BalasHapus
    Balasan
    1. di CSS-nya
      silakan perhatikan code saya yang ada di codepen (blok hitam)

      Hapus
  4. kalau pakai gaya koran, berat loadingnya dan juga kadang navigasi menu susah (ga nemu mana home, dll)

    BalasHapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia