بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Multi kolom pada blog adalah memisahkan artikel yang terjuntai panjang kebawah menjadi 3 atau bahkan lebih berjejer ke samping. Tidak hanya sekedar 2 kolom yang terpampang.
Dalam artikel sebelumnya saya pernah membahas tentang Membagi Artikel di Blog Menjadi 2 Kolom Supaya Rapi dan Indah. Dan sekarang saya akan membahas tentang Multi Kolom pada artikel blog. Jadi simak ya.
Baca Juga : Variasi Text Area dengan CSS di Postingan Blog
Selain memperpendek artikel, fungsi valid dari multi kolom adalah merapikan postingan yang sering kali kita tidak sempat untuk membaca hingga akhir postingan. Dengan trik ini dimungkinkan mata kita akan tertuju ke arah samping bukan kebawah.
Sebetulnya tidak ada masalah dengan artikel yang panjang dan tanpa menggunakan kolom. Karena demikian saya berusaha memberikan alternatif untuk membuat artikel jadi seperti media surat kabar.
Baca Juga : Modifikasi Spoiler Show Hidden dengan CSS dan HTML
Sudah tahu layout surat kabar yang sering kita baca di perangkat mobile khan atau kita baca di perangkat PC. Hampir dipastikan semua artikelnya menjadi super multi kolom. Tetapi ada juga yang baca lanjutannya di halaman berikutnya.
Langsung saja kita mulai ya.
Membuat Multi Kolom dengan CSS3
Di dalam postingan artikel yang sedang kita buat. Hanya penambahan sedikit kode CSS untuk memerintah supaya tulisan menjadi berbentuk kolom. Kodenya seperti ini. Simak dibawah ya.
<div style="
background:#00ffff;
border:3px solid #ff0000;
column-count:3;
column-gap:1em;
column-rule:1px dotted red;
margin:5px 5px 5px 5px;
padding:5px 10px 5px 10px;">
Isi artikel kalian disini
</div>Catatan :
Background adalah latar dari kolom itu, silakan beri warna menurut selera. Kode warna terpampang di artikel Daftar Kode Warna Pada HTML
Border adalah garis tepi dari kolom bisa berupa garis lurus atau garis putus-putus / dot
column-count adalah jumlah kolom yang nanti akan terbaca di postingan
column-gap adalah jarak antara kolom satu dengan kolom lainnya
column-rule adalah bentuk pembatas dari antar kolom
margin adalah jarak garis tepi dengan bidang posting
padding adalah jarak kata dalam kolom dengan garis tepi
Setelah selesai dilakukan saatnya membaca Alhamdulillah karena kerjaan sudah jadi begitu khan? Sekarang liat di contoh ini dibawah :
Sekian dan terima kasih untuk semua yang sudah mampir dan membaca artikel Membuat Multi Kolom dengan CSS3. Ketemu lain waktu ya. Dengan artikel lainnya dan semoga bisa membantu kalian mempermak blog menjadi lebih keren lagi. Wassalam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Multi Kolom dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
