> > Cara membuat halaman postingan jadi 3 kolom

Cara membuat halaman postingan jadi 3 kolom

Unknown

: 07.25 13 comments

M
ungkin sobat penah lihat bentuk penulisan pada sebuah majalah atau koran disitu dapat lihat beberapa Artikel atau keseluruhan artikel di tulis dengan  beberapa kolom sama halnya postingan  full blog design kali ini coba sobat perhatikan ,disini postingan di bagi menjadi 3 kolom ,hal ini juga bisa di terapkan pada postingan yang ada di blog sobat


bahkan sobat bisa memodifikasi menjadi 2,3,bahkan 4 sesuai lebar template sobat.Cara nya cukup mudah dan very simple, sobat cukup meletakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya :
#colom-articel {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}
Jangan lupa Save Template setelah sobat selesai meletakkan kode CSS nya.
Perlu di perhatikan : kode tanda 3 warna biru di atas adalah bentuk atau jumlah kolom yang ingin sobat tampilkan
sedang kode  merah adalah pembatas kolom sobat bisa ganti warnanya sesuai  
 keinginan 
   Dan yang terakhir jangan lupa setiap  sobat membuat postingan gunakan kode seperti di bawah ini
<div id="colom-articel"> mulai penulisan artikel disini  </div>            
Selamat mencoba semoga berhasil wassalam.                  
Judul Artikel :Cara membuat halaman postingan jadi 3 kolom
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat halaman postingan jadi 3 kolom Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
Label:

13 komentar

avatar
Balas
zulham delete 27 Agustus 2012 pukul 12.49

tapi kalau ada gambarnya gimana sob,..

avatar
Balas
Unknown delete 27 Agustus 2012 pukul 14.58

@zulham Saya kira kalau akan menggunakan cara ini tentunya penggunaan gambar di minamalisir dulu lah sob atau jika terpaksa harus menggunakan gambar tentunya kita lebih baik menggantinya menjadi 2 kolom saja dengan mengganti di bagian kode css nya

avatar
Balas
Unknown delete 27 Agustus 2012 pukul 17.59

wah,,hasilnya jadi gimana nanti tuh,
1 kolom aja udah puyeng mikir bahan posting nya,apalagi 3?

avatar
Balas
Unknown delete 27 Agustus 2012 pukul 19.55

@Ants Kaka dah gak usah puyeng sob karena meskipun postingan/artikel sedikit tetap artikel akan tertata rapi secara otomatis lagian buat you gak butuh kode ini sob karena blog you kan blog tutorial

avatar
Balas
Unknown delete 28 Agustus 2012 pukul 20.55

nice info sobat...

avatar
Balas
Unknown delete 28 Agustus 2012 pukul 22.11

@dea amanda Thanks

avatar
Balas
Gelora Sriwijaya delete 29 Agustus 2012 pukul 23.11
Komentar ini telah dihapus oleh administrator blog.
avatar
Balas
anak baik delete 3 September 2012 pukul 16.18

itukan untuk artikelnya ya sob

avatar
Balas
Unknown delete 3 September 2012 pukul 17.28

@anak baik betul sob

avatar
Balas
Unknown delete 29 Agustus 2013 pukul 21.21

Yang tanpa edit HTML template caranya gmna ya mas?

avatar
Balas
Unknown delete 30 Agustus 2013 pukul 10.35

<div style="-moz-column-count: 3;text-align:justyly;-moz-column-gap: 1.5em;-moz-column-rule: 1px solid #c4c8cc">Isi Artike Disini </div>

avatar
Balas
Admin delete 19 Januari 2014 pukul 07.16

webnya bagus mas.Makasih udah berbagi.http://tutorialblogdisini.blogspot.com

avatar
Balas
Bimbel Anak delete 19 Mei 2014 pukul 09.24

Artikel yang menarik dan sudah dicoba..thx

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

Konversi