Mari kita review trik blogger membuat postingan berkolom :
- Login dulu ke account blogger kamu.
- Pilih tab Tata Letak --> Edit HTML.
- Cari kode ]]></b:skin>.
- Copas kode CSS berikut di atas kode tersebut.
.post-column-top {
-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 2;
-khtml-column-gap: 15px;
-khtml-column-rule: 0px dotted #E1D4C0;
padding-bottom: 10px;
border-bottom:1px dashed #E1D4C0;
}
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 3;
-khtml-column-gap: 10px;
-khtml-column-rule: 0px dotted #E1D4C0;
font-size: 85%;
line-height:14px;
padding-bottom: 10px;
border-bottom:1px dotted #E1D4C0;
}
-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 2;
-khtml-column-gap: 15px;
-khtml-column-rule: 0px dotted #E1D4C0;
padding-bottom: 10px;
border-bottom:1px dashed #E1D4C0;
}
.post-column-bottom {
-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 2;
-khtml-column-gap: 15px;
-khtml-column-rule: 0px dotted #E1D4C0;
}
.post-column-top2 {-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 3;
-khtml-column-gap: 10px;
-khtml-column-rule: 0px dotted #E1D4C0;
font-size: 85%;
line-height:14px;
padding-bottom: 10px;
border-bottom:1px dotted #E1D4C0;
}
.post-column-bottom2 {
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 3;
-khtml-column-gap: 10px;
-khtml-column-rule: 0px dotted #E1D4C0;
font-size: 85%;
line-height:14px;
}- Jangan lupa disimpan.
- ...-column-count menunjukkan jumlah kolom.
- ...-column-gap menjempolkan jarak antar kolom.
- ...-column-rule mengelingkingkan border antar kolom (kalau tidak digunakan juga tidak apa-apa).
- font-size menengahkan ukuran huruf.
- line-height memaniskan jarak antar baris teks/kalimat.
- padding-bottom menunjukkan jarak kolom atas dengan kolom bawah (berguna kalau kamu membuat dua baris kolom).
- border-bottom menunjukkan garis bawah kolom (berguna kalau kamu membuat dua baris kolom).
(Jari-jari.....)
- Kode CSS di atas digunakan untuk membuat postingan berkolom 2 (dua) dan 3 (tiga).
- Kode CSS tersebut bisa kamu pilih atau dipakai seluruhnya.
- Untuk penggunaan kode -moz, -webkit, -khtml dapat kamu baca pada postingan "Membuat Rounded Corner".
- Kode CSS tersebut dapat kamu permak sesuai dengan keinginan dan template blog kamu.
- Contoh Terapan I : Postingan 2 (dua) kolom
<div class="post-column-top">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.</div>
<div class="post-column-bottom">Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawahnya kamu tidak akan melihat ada garis putus-putus lagi.</div>
- Jadinya akan seperti berikut :
Ini merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode huruf awal bergaya koran dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.
Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.
Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.
- Contoh Terapan II: Postingan 2 (dua) dan 3 (tiga) kolom
<div class="post-column-top">Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.</div>
<div class="post-column-top2">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 3 (tiga) dan 4 (empat) diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode-kode lainnya. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.</div>
<div class="post-column-bottom2">Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.</div>
- Jadinya akan seperti berikut :
Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.
Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.
Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 3 (tiga) dan 4 (empat) diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode-kode lainnya. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.
Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.
Panjang dan lama (itulah coki-coki!!???) juga postingan trik membuat postingan berkolom ini. Akhirnya selamat berkolom ria dalam postingan blog kamu...
Bingung deh...tapi kalo buat aku kayaknya postingan berkolomgak terlalu penting deh,,
BalasHapuscz postinganku pendek-pendek banget,,hehe
ide yang menarik...!
BalasHapusdipelajari dulu bang..! puyeng..!
yang otomatis ada nggak..!
kayak read more kan ada yang otomatis..!
@kibagus : Emang puyeng kk. OB yang nulis aja puyeng, tp kalau udah lancar mudah kok untuk menerapkannya. Untuk yang otomatis bisa juga, kk. Cuma keseluruhan posting akan berbentuk kolom-kolom, jd ngga bisa divariasikan.
BalasHapusok deh terima kasih atas postingan yg sangat berguna ini mas, bisa jadi referensi saya nanti. Ok teruskan good luck!
BalasHapusmungkin bagus ya kalo dibuat berkolom-kolom kayak koran en mbacanya juga mudah...
BalasHapusKeren juga, mesti diterapkan di blog magazine nih, biar kayak majalah atau koran beneran.
BalasHapusada demonya gag sob ?
BalasHapus@fajri : Demonya udah jelas kaya contoh Terapan I dan II di atas, kk
BalasHapusBlogwalking Blogwalking, mantapz Ilmunya, sy tertarik utk yg 2 kolom aja, nanti dipelajari dulu cara pasangnya.
BalasHapusini yg lg saya cari2, thanks bro.
BalasHapusdicoba dulu ya.... :)
Wah puyeng juga kayanya, tapi ane coba dulu dah biar asyik.. Thanks yah.
BalasHapuskalau bordernya berupa garis vertikal di tengah kolom g bisa ya bang?
BalasHapus