Caranya adalah sebagai berikut :
1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode
.post {7. Tambahkan width/lebar sesuai dengan yang ingin anda tampilkan. Secara utuhnya kode post jadi seperti ini
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post {8. Berikutnya cari kode seperti dibawah ini :
width:274px;/*setengah lebar main wrapper anda*/
float:left;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post-body {
margin:0 0 0.75em;
overflow:hidden
margin:0 0 .75em;
line-height:1.6em;
}
9. Ubah kode tersebut menjadi seperti dibawah ini :
.post-body {10. 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.
margin:0 0 0.75em;
height:255px; /*ganti sesuai dengan keinginan*/
overflow:hidden
margin:0 0 .75em;
line-height:1.6em;
}
<b:if cond='data:blog.pageType == "item"'>
<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>
11. Save
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 {Tambahkan height dengan ukuran yang anda inginkan, misalnya height:35px; maka susunannya menjadi seperti dibawah ini :
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;
}
.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.
Tambahan :
Jika anda ingin tampilan kolom postingan (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;
}
