Cara Membagi Kolom Artikel Postingan

11/09/2014
Cara Membagi Kolom Artikel Postingan Blogger

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

Disini saya akan memberikan sedikit tips dengan memanfaatkan kode CSS column-width Property.

Terlebih dahulu silahkan anda terapkan kode di bawah ini pada template

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

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

Maka hasilnya akan terlihat seperti 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, diam 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 tambahan 3 kolom


Cukup mudah bukan, selamat mencoba.


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

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

17 comments

i need a new nice templat blogger
send Mee pLeaz
Marouantech@gmail.com

Balas

i already share template, what else... please not to spamming here, do not try to hurt yourself

Balas

gak ada menu drop and downnya mbak?

Balas

dropdown? ini post Cara Membagi Kolom Artikel Postingan

Balas

sidebar nya di ilangin, halaman nya di bikin penuh, setiap kolom di beri background, buat blogazine!! :-d

Balas

iya, konsep blogazine memang perlu kreativitas

Balas

nice share..
ayo main tic tac toe :D

Balas

Mbak Arlina, kode CSS tersebut diletakkan dibagian mana? Mohon maaf masih newbie mbak. Thanks

Balas

terapkan sebelum ]]></b:skin> atau </style>

Balas

Sudah sya terapakan hasilnya sangat memuaskan mantap banget, Thanks.

Balas

Terimakasih atas informasinya. mantap bangat tutornya saya mencobanya wah bisa juga di bagi artikelnya angga ariwibowo blog

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.