Cara Membuat Blog 3 Kolom

Cara Membuat Blog Tiga Kolom - Bagi anda yang seorang blogger, kini saya akan memberikan Tutorial mengenai bagaimana cara membuat layout menjadi 3 kolom pada blog. Anda pasti pernah melihat banyak blog yang memiliki design 3 kolom. Jika anda ingin membuat template anda seperti itu silahkan simak tutorial sederhana berikut.

Menambahkan Kolom Sidebar Ketiga pada Template Blogger

Cara Membuat Blog Menjadi Tiga Kolom Sidebar

1. Pergi ke Template > Edit HTML
2. Cari :
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar
float */

}
dan ganti float menjadi :
float: right;
3. Dibawah itu tambahkan :
#left-sidebar-wrap {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
"float: left" akan membuat sidebar baru anda berada kiri. Dengan demikian anda akan memiliki sidebar di kiri template blog anda.

4. Cari dan ubah lebar dari outer-wrapper menjadi 900px atau lebih untuk menghindari tumpang tindih sidebar dengan main-wrapper.
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
 5. Cari #main-wrapper dan ganti dengan :
#main-wrapper {
width: 410px;
float: left;
margin:0 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Berikut margin ke kiri dan ke kanan 20px ditambahkan untuk menghindari tumpang tindih sidebar dengan main wrapper. Anda dapat mengubahnya sesuai untuk mengatasi masalah tumpang tindih pada sidebar.

6. Letakkan kode berikut :
<div id='main-wrapper'>
Tepat sebelum kode ini:
<div id='left-sidebar-wrap'> 
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
7. Simpan template anda dan selamat sidebar ke-3 anda sudah terpasang

Sekarang anda harus melakukan beberapa penyesuaian sendiri. Sesuaikan lebar dengan mengubah pixel (px) dari "outer-wrapper", "main-wrapper", "sidebar-wrapper" dan "kiri-sidebar-wrap". Mengatur margin, padding dan lebar dengan cara yang sama untuk "header-wrapper" dan "footer-wrapper" untuk mencocokkan gaya.

source : http://www.simplebloggertutorials.com

5 Responses to "Cara Membuat Blog 3 Kolom"

  1. terimakasih, sekali. Saya sangat terbantu dengan tutorial ini.

    BalasHapus
  2. Uda nyoba nih, sukses. Liat blog ane Gan!!! :D
    Makasih tutornya ya....

    BalasHapus
  3. Terima Kasih Gan !! Ane Berhasil Thanks Artikelnya

    BalasHapus
  4. kalau template saya tidak ada #sidebar-wrapper {
    gantinya cari kode apa ya?

    BalasHapus

Berkomentarlah dengan sopan, seperti :
- Memberi saran
- Memberi tanggapan

Yang berguna demi kemajuan blog ini, terima kasih ^^