Menambah Kolom Sidebar Menjadi 2 Kolom, 3 Kolom Atau Lebih

 

hi blog walking...apa kabar neh semua??? baik dan oke kan??? well aku lagi bete neh, tapi is oke, heheeee 'berlebihan basa-basinya..aku naru aja habis otak-atik blogku ini sebelum posting ini. coba lihat sedibarku sekarang 2 kolom(awalnya 1 tambah 1 jadi 2 ini barusan aku tambah 1 jadi 3). bay the way aku mau bagi sedikit tips neh bagi yang mau nambah kolom pada sidebarnya. so ngak ngoceh lagi segera kita menuju TKP, login ke blog km lalu pilih element halaman dan lalu edit HTML, CARI CODE ini

 

#sidebar {
width: 205px;
float: right;
border-top: solid 1px #fff;
padding-top: 3px;
padding-bottom: 2px;
padding-$startSide: 2px;
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 */

 

sudah ketemu?.. kalau sudah tambahkan code berikut ini pas diatas code yang yang disebutkan diatas tadi

 

#sidebar2 {
width: 205px;
float: right;
border-top: solid 1px #fff;
padding-top: 3px;
padding-bottom: 0;
padding-$startSide: 2px;
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 */
}

lalu cari code ini

 

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

 

kalau sudah ketemu copy code ini lalu di paste di notepad atau mana saja yang bisa untuk edit tulisan...dan tambahkan id unik atau istilahnya nama unik..contohnya seperti ini(lihat tulisan warna pink) itulah yang aku sebut id unik

 

<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

 

nah kalau sudah di edit seperti itu copy lalu tambahkan di atas code

 

<div id='main-wrapper'>

 

hasilnya seperti ini

 

<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>

 

kalau sudah ...
jangan save dulu dengarkan dulu penjelasannya :
@tulisan 205px; berwarna biru tua
adalah lebar dari sidebar kita, lebar sidebar yang ada ngak boleh melebihi lebar #outter wrapper ditambah padding sidebar, dan #main jadi ini mesti di perhatikan

@tulisan right berwarna merah menunjukan letak / lokasi sidebar

nah kalau sudah ngerti maka di edit dulu lebar dan letak sedibar sesuai keinginkan....
lalu save dan lihat letaknya di ELEMENT HALAMAN apa sudah sesuai keinginan kita, contoh saja kalau sidebar dua kolom di sebelah kanan maka klu sudah jadi maka hasilnya akan seperti ini bila di lihat di element halaman

perhatikan hanya yang di garis/ada tandai merah
karna gambar hanya sebagai contoh dan memang lagi ngak ada gambar yang sesuai.jadi kalau hasilnya belum sesuai edit lagi lebar antara semua sidebar dan #main bila di gabung hasilnya lebar #outter wrapper,
namun bila belum bisa walau hitungannya sudah benar maka aku sarankan, tambahkan code ini di bawah komponen

 

#main

/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 522px;
}
/* IE5 hack */
#main {}

 

contohnya seperti ini :

 

#main-wrapper {
width: 522px;
float: $startSide;
padding: 3px 3px;
border-top: solid 2px ;
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 */

/* Tantek hack – instanttutorial.blogspot.com*/
voice-family: "\"}\"";
voice-family: inherit;
width: 522px;
}
/* IE5 hack */
#main {}

 

well semoga kamu bisa mengaturnya menjadi tidak molor baik itu sidebar maupun "main" nya, kalau memang ngak ada masalah kamu bisa menambah lagi kolom sidebar baru seperti contoh diatas, misal sidebar1 sidebar2 sidebar3...sekian , semoga bermanfaat. kalau ngak menjadi aku sarankan jalan terakhir kamu jangan sungkan tanya...thank

 

Ref : http://www.ramlantjong.com/