27 March 2022

Membuat Multi Kolom dengan CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Membuat Multi Kolom dengan CSS3

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.

Bagikan ke teman-teman kamu
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.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon