Februari 15, 2012

Posting Multi Kolom Seperti Koran dan Majalah

Situseo Blog : Membuat posting multi kolom untuk sebuah artikel blog yang menyerupai majalah dan koran mungkin akan terlihat unik dalam sebuah tampilan artikel, posting artikel multi kolom ini akan sangat berguna dari segi tampilan suatu post utruk menampilkan bentuk yang berbeda dengan post-post pada umumnya.


Mungkin tidak wajar jika seluruh post artikel menggunakan multi kolom, akan lebih unik jika penggunaannya pada halaman tertentu dengan design template yang disederhanakan dan dipadukan dengan suatu event tertentu. Untuk membuatnya cukup mudah, hanya dengan menambahkan kode css didalamnya dan html sebagai perintah untuk menampilkankannya, ya lagi-lagi css, memang dengan kehadiran css apalagi css3 sudah membawa perubahan besar terhadap design suatu weblog.

Sekarang yang kita bahas ini, merupakan bentuk dari hasil kode css, saya sendiri kadang sedikit bingung dengan kode sederhana seperti itu bisa membentuk suatu perubahan yang mendasar, terutama dalam post ini mengenai multi kolom posting artikel dalam suatu blog.

Tertarik untuk membuat posting artikel multi kolom dalam blog kalian supaya mempunyai tampilan yang berbeda dengan tampilan posting pada umumnya? kalian bisa memakai kode css dibawah ini untuk mewujudkan itu.

-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;

Kode css tersebut diatas merupakan badan dari css yang membentuk perintah membuat 3 kolom dengan jarak 10 px per kolom, untuk menampilkan post artikel multi kolom dalam suatu postingan, kalian perlu menambahkan kode css tersebut dalam postingan dalam mode Edit HTML menjadi seperti ini :

<style type="text/css">
#posting3kolom {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;}
</style>
<div id="posting3kolom">ISI POSTINGAN</div>


Cara tersebut diatas dilakukan dengan cara manual untuk menampilkaan post arikel multi kolom pada post-post tertentu dan dalam contoh tersebut untuk membuat 3 kolom, jika menginginkan menjadi 4 atau 5 kolom, kalian bisa mengganti angka dalam column count menjadi 4 atau 5, seperti pada alenia ini saya mengganti menjadi 2 kolom untuk menjadi pembeda dengan kode css yang diterapkan diatas. Cara manual sangat cocok dipergunakan untuk postingan tertentu saja, jika menginginkan secara otomatis pada setiap postingan memiliki tampilan multi kolom, kalian bisa membaca caranya disini. Semoga posting artikel multi kolom ini bisa memberi ciri berbeda dengan blog post-blog post pada umumnya dan berharap menjadikan tampilan blog kalian menjadi lebih unik.

Semoga bermanfaat,

3 Diskusi untuk Posting Multi Kolom Seperti Koran dan Majalah

7 Maret 2012 21.59  

keren sekali, makasih banyak infonya.
btw, gimana ya cara nampilkan blog biar bisa tampil empat kolom pos tapi per label.

misal : kolom 1 untuk label A (terus yang terlihat di bawahnya cuma beberapa post dari label A yang terlihat).

Kolom 2 untuk label B (terus yang terlihat di bawahnya juga cuma beberapa post dari label B)

begitu seterusnya.

31 Maret 2012 19.11  

sip gan tutorialnya?

4 April 2012 23.46  

ini yang anne cari..makasih gan

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top