MENAMPILKAN POSTINGAN MULTI KOLOM

Postingan artikel secara default, hanya menampilkan satu kolom berderet kebawah sesuai jumlah postingan yang telah kita atur. Hal itu mengakibatkan jumlah postingan yang ditampilkan pada halaman utama dan halaman-halaman berikutnya tidak bisa terlalu banyak karena akan terlalu panjang kebawah.
Solusinya, anda dapat mengatur halaman postingan menjadi berderet ke bawah juga berderet kesamping, atau dalam istilah lainnya postingan tampil dalam bentuk kolom-kolom.
Cara menapilkannya mudah, hanya untuk membuat tampilan menjadi terlihat rapih, memerlukan waktu yang agak lama, sebab ukuran yang kita buat bisa terlalu lebar atau terlalu kecil sehingga tampilan postingan akan menjadi amburadul.
Jika terlalu lebar, postingan akan tetap berjejer kebawah serta di sebelah kanannya akan ada ruang yang masih kosong, dan apabila terlalu kecil postingan akan berderet kesamping juga kebawah tetapi dibagian kanan juga akan ada ruang kosong. Sebab itu tadi, pengaturannya akan memakan waktu agak lama unyuk menempatkan postingan sesuai dengan lebar kolom yang tersedia.

Demo : Lihat postingan pada EPG Studio. Kekanan muat 2 postingan dan kebawah muat 5 postingan.
Disarankan, gantilah fasilitas Read More blog anda dengan : READ MORE OTOMATIS , agar jumlah karakter pada halaman muka dan halaman berikutnya sama.

Jika anda ingin membuat tampilan seperti pada postingan EPG Studio, silahkan ikuti langkah-langkahnya.

• Masuk ke Blogger.
• Pilih Rancangan bagian Edit HTML.
• Backup dulu template anda, jika takut gagal.
• Cari kode seperti dibawah ini :(kode dibawah merupakan kode post yang belum diubah/masih asli)
  
  
  .post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
• Tambahkan width/lebar sesuai dengan yang ingin anda tampilkan. Secara utuhnya kode post jadi seperti ini :
  
  
  .post {
width:274px;/*setengah lebar main wrapper anda*/
float:left;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
• Berikutnya cari kode seperti dibawah ini :
  
  
  .post-body {
margin:0 0 0.75em;
overflow:hidden
margin:0 0 .75em;
line-height:1.6em;
}
• Ubah kode tersebut menjadi seperti dibawah ini :
  
  
  .post-body {
margin:0 0 0.75em;
height:255px; /*ganti sesuai dengan keinginan*/
overflow:hidden
margin:0 0 .75em;
line-height:1.6em;
}
• Cari kode </head> kemudian copy kode dibawah dan paste tepat diatasnya . Fungsi kode ini agar waktu dibuka lebar postimgan akan sama dengan ukuran main wrapper anda, jadi bukan ukuran yang diatur pada bagian post diatas.
  
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.post {
width:580px; /*samakan dengan width main wrapper*/
margin:.5em 5px 1.5em 3px;
}
.post-body {
height:100%;
}
</style>
</b:if>
• Klik tombol Simpan Template.

Jika tampilan masih belum sesuai dengan yang anda harapkan, anda harus kembali ke Edit HTML untuk mengubah kedua ukuran yang ditambahkan tadi.

1. Jika postingan hanya berderet kebawah sedangkan disebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu besar, silahkan anda kecilkan ukuran width-nya.
2. Jika postingan sudah berderet kesamping juga berderet kebawah, tapi di sebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu kecil, silahkan anda tambah width-nya.
3. Anda harus melakukan berulang-ulang sehingga mendapatkan tampilan yang maksimal/sesuai dengan yang anda inginkan.

Setelah selesai mengatur lebar dan tinggi kolom postingan, mungkin anda masih kecewa dengan tampilan judul postingan yang tidak cukup pada tempatnya sehingga bagi judul postingan yang panjang akan bergeser kebawah keluar dari tempatnya.
Jika hal itu terjadi, coba anda atur judul postingan (h3) dengan menambahkan height dalam pixel. Caranya :

• Cari kode :
  
  
  .post h3 {
text-align:center;
margin:.25em 0 0;
padding:4px 4px 4px;
font-size:100%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:#31363F;
border:3px solid #2F323D;
}
• Tambahkan height dengan ukuran yang anda inginkan, misalnya height:35px; maka susunannya menjadi seperti dibawah ini : (kode css dibawah ini merupakan kode css judul post yang dipakai EPG Studio).
  
  
  .post h3 {
text-align:center;
margin:.25em 0 0;
padding:4px 4px 4px;
font-size:100%;
font-weight:normal;
line-height:1.4em;
height:35px;
color:$titlecolor;
background:#31363F;
border:3px solid #2F323D;
}
• Anda harus berulang-ulang melakukan pengeditan judul post sampai ditemukan yang paling sesuai dengan tampilan blog anda sekarang.
• Selamat mencoba, semoga bermanfaat....!!!

Tambahan :
Jika anda ingin tampilan kolom postingan sama dengan EPG Studio (border melengkung) tambahkan sedikit kode pada bagian post. Kodenya seperti ini :

.post {
width:274px;
float:left;
padding:5px; /* Jarak antara text post dengan garis pinggir */
Border-top: 3px solid #2F323D; /* warna garis pinggir atas */
Border-bottom: 3px solid #2F323D; /* warna garis pinggir bawah */
Border-left: 3px solid #2F323D; /* warna garis pinggir kiri */
Border-right: 3px solid #2F323D; /* warna garis pinggir kanan */
Margin-bottom: 10px; /* jarak antara post yang satu dengan yang lainnya */
Margin-left: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

PENTING UNTUK ANDA BACA