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;
}
Tips Blogger
- Scroll Tampil Dipostingan Jika Diperlukan
- Membuat background Pada Judul Sidebar
- Menambahkan Twitter Button di Blog
- Membuat Saving Energy Dengan Gambar Sendiri
- Fixed Guestbook Slide Effect With jQuery
- Naruto Emot Untuk Komentar
- Efek Animasi Dasar Pada Blog
- Cara Mudah Membuat Tool Tip Dengan CSS
- Cara Mudah Membuat Textarea
- Membuat Menu Iklan (jQuery Ads Popout)
- Cara Membuat Slideshow Gambar (with jQuery)
- Membuat Simple Menu
- Efek-efek Tulisan Menggunakan CSS3
- Membuat Menu Daftar Isi Jtoctree
- Image Zoom Effect With Jquery
- Shoutbox Light Effect
- Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )
- Bertabur Cinta
- Light Hover Horizontal Menu With CSS For Blogger
- Cara Memindah-Mindahkankan Gambar Dengan jQuery
- Cara mudah memasukkan banyak Tab Widget pada sidebar
- Cara Pasang Efek Kupu - Kupu Berterbangan
- Merobah Domain Menjadi CO.TV
- Cara Memasang Efek Bintang Berjatuhan di Blog
- Make Border-Radius