Cara Membagi & Membuat Halaman Artikel Blog 2,3,4 Kolom - Mengganti tampilan blog yang kita miliki sungguh menyenangkan, begitu juga jika membuat sesuatu yang berbeda dengan tampilan artikel blog kita, agar memiliki estetika yang lebih menarik tentu dipasang beberapa pernik agar halaman artikel lebih menarik. Dan pada artikel ini, akan dijelaskan mengenai
cara membagi kolom artikel blog menjadi 2 kolom atau lebih
Ada beberapa cara yang bisa kita lakukan untuk membuat halaman artikel blog menjadi dua atau lebih, yaitu:
Membagi Kolom Dengan Sama Rata Halaman Artikel - Cara ini bisa langsung diterapkan saat kita akan membagi artikel menjadi dua kolom. Karena cara ini hanya membagi lebar halaman artikel menjadi dua bagian yang sama
Sehingga dengan menggunakan cara ini, kita tidak perlu menggunakan kode css yang terlalu banyak. Namun, karena kurangnya penggunaan kode, tampilannya sedikit kurang bagus
Pemasangan, salin kode berikut ini:<div style="background: #ddd1a7; float: left; padding: 10px; width: 45%;">Gambar atau artikel sebelah kiri</div><div style="background: #ddd1a7; float: right; padding: 10px; width: 45%;">Gambar atau artikel sebelah kanan</div> | Membagi Kolom Menggunakan Table - Seperti yang terlihat pada bagian tulisan ini, sudah jelas kalau membagi halaman artikel pada tulisan ini menggunakan table dan juga terlihat adanya garis yang membatas pada tepi artikel ini | Sebenarnya garis tepi ini tidak selalu menunjukkan sebauh table, tapi karena secara default pengaturan pada kode css table template ini menggunakan garis, maka secara otomatis akan selalu muncul |
Pemasangan, salin kode berikut ini:<table cellpadding="10" cellspacing="10"><tbody><tr><td align="justify" valign="top" width="310">Gambar atau artikel sebelah kiri</td><td align="justify" valign="top" width="310">Gambar atau artikel sebelah kanan</td></tr></tbody></table>Keterangan :width="310" adalah lebar kolom, ganti agar menyesuaikan lebar kolom artikel blog sobat
Membagi 2 Kolom Artikel Sesuai Browser - Maksudnya adalah membagi kolom dengan menggunakan kode css tapi kode tersebut akan tampil lebih baik jika menggunakan browser yang mendukung terhadap kode css yang membagi
2 kolom pada tulisan ini. Dari sekian cara yang saya jelaskan, cara inilah yang sebenarnya lebih saya suka karena saat membagi tulisan artikel menjadi 2 kolom, kita tidak perlu lagi menyediakan kolom lagi. Maksudnya, kita bebas menulis dan setelah diterapkan, ia akan membagi menjadi 2 kolom secara otomatis
Membagi 3 Kolom Artikel Sesuai Browser - Sama seperti yang telah saya jelaskan diatas kalau tampilan 3 kolom artikel ini akan bekerja lebih baik jika menggunakan browser yang mendukung, jika tidak, kemungkinan tampilannya tidak sesuai dengan yang diinginkan, bisa rusak dan bisa tidak tampil. Penggunaan kode untuk menampilkan
kolom artikel blog menjadi 3, sama persis dengan dua kolom artikel dan hanya mengganti nilai yang ditentukan untuk dalam menampilkan tiga kolom
Membagi 4 Kolom Artikel Sesuai Browser - Sama dengan dua penjelasan diatas, 2 dan 3 kolom artikel. Pada bagian ini, kita bisa juga dengan mudah dalam membuat kolom artikel menjadi 4 kolom, bahkan lebih... Dengan penggunaan kode yang sangat simpel, membagi kolom artikel
blog menjadi beberapa kolom menggunakan cara ini terasa lebih mudah karena tidak terlalu banyak menggunakan kode
Pemasangan untuk 2, 3, 4 kolom salin kode berikut kedalam kode template blog#2-kolom {background:#d9a7dd;padding:10px;-moz-column-count:2;-moz-column-gap:10px;-webkit-column-count:2;-webkit-column-gap:10px;column-count:2;column-gap:10px;}Keterangan:Untuk menjadikan 3 atau 4 kolom, ganti angka 2 dengan jumlah kolom yang diinginkan
Kode markup atau pemanggil, salin kode berikut kedalam kolom artikel
<div id="#2-kolom">Pasang dan ketikkan artikel disini</div>Membagi 2 Kolom Artikel Menggunakan CSS - Kecuali pada bagian tulisan ini, saya membuat dan membagi kolom artikel menggunakan kode css dan saya lebih menyukai cara ini karena lebih fleksibel dan tidak terpengaruh pada browser untuk menampilkannya, bahkan bisa diatur sendiri agar mendukung untuk semua browser
Cara ini hampir sama dengan cara yang pertama, bedanya hanya pemasangan dan penggunaan kode css saja. Jika pada cara pertama hanya menggunakan sedikit kode yang bisa langsung dipasang pada
kolom artikel, maka pada bagian ini menggunakan full css yang dipasang kedalam kode template, sehingga hasilnya seperti yang terlihat ini
Bagaimana? Tertarik untuk memasangnya kedalam halaman artikel blog sobat? Silahkan dipilih sesuai dengan keinginan dan kebutuhan sobat dalam
Membagi & Membuat Halaman Artikel Blog 2,3,4 Kolom
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@