Cara Membuat Tampilan Multi Kolom

Hay sobatt..
bertemu lagi.. mau ngapain yahh ??
buat MULTI KOLOM 
aja yukk !!...
sangat mudah lho.. bagi yang udah faham.. :D hehehe

gimana pasti mau, kann.. buat multi kolomm.
yukk !! saat nya membahas..
1...
2...
3... ets belum,masih kurang
GO !!

tapi.. kalian harus memakai read more otomatis..supaya.. tidak berurutan ke bawah..

1. Masukke Blogger
2. Pilih Template Dan Pilih Edit HTML
3. Unduh/Download Dulu Template.. Jika Takut Gagal !
4. Cari Kode Seperti Kode Di Bawah Ini (kode dibawah ini merupakan kode post  sebelum di ubah/masih asli). cara cepat mencari klik CTRL+F atau f3.

.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

5. Tambahkan widht/lebar seperti kode di bawah 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; }

6. Berikutnya, cari kode seperti di bawah ini.

.post-body { margin:0 0 0.75em; overflow:hidden margin:0 0 .75em; line-height:1.6em; }

7. Ubah kode tersebut menjadi kode di bawah ini.

.post-body { margin:0 0 0.75em; height:255px; /*ganti sesuai dengan keinginan*/ overflow:hidden margin:0 0 .75em; line-height:1.6em; }

8.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 == "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>

9.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 NABIL02).  

.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....!!! 

Ditulis oleh Unknown, - Rating: 4.5

Judul : Cara Membuat Tampilan Multi Kolom
Deskripsi : H ay sobatt.. bertemu lagi.. mau ngapain yahh ?? buat MULTI KOLOM  aja yukk !!... sangat mudah lho.. bagi yang udah faham.. :D heheh...

Bagikan ke

Facebook Google+ Twitter