Gara-gara dimintain tolong buat nambahin kolom sama Jeng Novi, jadi penasaran deh cari tahu gimana caranya. Nanya sama Mbah Google, nemu juga triknya dari Hackosphere

Note: Tutorial ini hanya instruksi general untuk menambahkan kolom pada layout Bloger yang baru (bukan pada Classic Blogger Template). Kalau sekiranya layout menjadi agak berantakan, harus di-adjust manual pada bagian CSS. Oiya, saya baru nyoba ke template minima, kalau ada yang udah nyoba ke template yang lain, silahkan comment yaa…

1. Blogger Layout pada dasarnya memiliki 3 CSS wrapper:

#outer-wrapper – yang mengatur kolom utama (keseluruhan)

#main-wrapper – yang mengatur kolom posting
#sidebar-wrapper – yang mengatur kolom sidebar

Untuk menambahkan sidebar baru, kita perlu nambahin kode yang ngatur sidebar tersebut. Caranya, copy properties-nya si #sidebar-wrapper, dan dinamain pake nama sidebar baru tersebut.

2. Biasanya setiap template itu punya lebar kolom yang beda-beda. Untuk kasus ini, setting lebar kolom utama adalah 750 px, kolom posting 400px, dan sidebar masing-masing 150 px (750 > 400+150+150). Kalau mau lebar yang beda, harus diadjust di kode CSS-nya, biar tampilannya bisa bagus di browser. Usahakan lebar kolom utama selalu lebih besar daripada jumlah lebar kolom posting dan sidebar, agar tampilan tidak menjadi berantakan.
   

3. Setelah itu, kita harus ubah property “float” yang ada di dalam property wrapper tersebut. Misalnya, kalau kita mau sidebar lama ada di kanan, berarti kita harus set float:right, Trus kalo sidebar barunya mau ada di kiri, berarti harus set float:left. Kalau mau dua-duanya ada di kanan atau di kiri ya berarti set floatnya bisa di kiri atau kanan dua2nya.

Binun?? Gak perlu binun…ini ada summary-nya kok….Pokoknya, cari kode yang kayak di bawah ini, trus copy paste aja kode yang warna merah

#outer-wrapper {
width: 750px;
…
}
#main-wrapper {
width: 400px;
margin-left: 20px;
…
}
#sidebar-wrapper {
width: 150px;
float: right;
…
}
#newsidebar-wrapper {
width: 150px;
float: left;
…
}

4. Udah diutak atik CSS-nya, sekarang tinggal tambahin kode di badan templatenya:

<div id=’newsidebar-wrapper’>
<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’false’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>

Selesai deeehhh. Kalo lihat di Page Element, sekarang udah ada kolom baru…tinggal diisi aja…

Selamat mencoba, kalo yang gak mau repot, bisa download template yang udah jadi disini

5 Responses to “Cara menambahkan sidebar pada New Blogger Layout”