2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode :
#sidebar-wrapper { background-color: #f6f6f6; width:254px; float:$endSide; padding:0; color: $sidebarTextColor; font-size: 83%; 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 */ } |
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find (ctrl-F).
KETERANGAN :
- Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai width-nya.
- Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing-masing sidebar menjadi 117px.
- Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.
5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini :
#sidebar-wrapper { background-color: #f6f6f6; width:254px; float:$endSide; padding:0; color: $sidebarTextColor; font-size: 83%; 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 */ } #sidebar-wrapper2 { background-color: #f6f6f6; width:254px; float:$endSide; padding:0; color: $sidebarTextColor; font-size: 83%; 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 */ } |
6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini :
#sidebar-wrapper { background-color: #f6f6f6; width:117px; float:$endSide; padding:0; color: $sidebarTextColor; font-size: 83%; 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 */ } #sidebar-wrapper2 { background-color: #f6f6f6; width:117px; float:$endSide; padding:0; margin:0px 20px 0px 0px; color: $sidebarTextColor;font-size: 83%; 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 */ } |
7. Setelah itu, cari kode :
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Label1' locked='false' title='kategori' type='Label'/> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='Feed1' locked='false' title='Creating Website' type='Feed'/> </b:section></div> |
8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.
9. Copy kode yang berwarna biru diatas lalu letakkan dibawah : </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini :
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Label1' locked='false' title='kategori' type='Label'/> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='Feed1' locked='false' title='Creating Website' type='Feed'/> </b:section></div> <div id='sidebar-wrapper2'> <b:section class='sidebar' id='sidebar2' preferred='yes'> </b:section> </div> |
10. Jika sudah klik Save Template... SELESAI... Klik Page Element untuk melihat hasilnya.
Sumber : http://creatingwebsite-maskolis.blogspot.com/2011/01/membagi-sidebar-menjadi-2-kolom-di.html
--- oOo ---
