Sebelum anda melakukan perubahan jangan lupa untuk membackup template anda(jaga-jaga siapa tahu salah pencet).kita pergi ke dashboard -> Template -> Edit HTML. klick “Download Full Template” untuk menyimpan backup di computer kita.Terus centang bagian Expand widget templates. cari bagian seperti ini:
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 450px;
margin-left: 25px;
float: left;
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-wrapper {
width: 200px;
float: right;
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 */
}
Untuk menambah sidebar satu lagi ,copy bagian yang tulisannya saya miringin dan paste setelah bagian tersebut, kemudian ganti namanya jadi newsidebar-wrapper.lalu kita mainkan ukuran semua wrapper tersebut.kalau saya punya 9000px untuk outer-wrapper, 450px untuk main-wrapper, and 2000px untuk sidebar-wrapper.terserah anda mau berapa anda bisa coba-coba terus(pake preview..kalau udah mantap baru di save).kalaupun salah anda masih pake template yang sudah anda simpan sebelum mengeditnya tadi kan(eh tadi sudah di save blom????)
sekarang tampilan hasilnya seperti di bawah ini:
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 450px;
margin-left: 25px;
float: left;
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-wrapper {
width: 200px;
float: right;
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 */
}
#newsidebar-wrapper {
width: 200px;
float: left;
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 */
}
Kemudian kita lanjutkan …Tambahkan width: 750px; saya tandai dengan huruf tebal
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
width: 750px;
selanjutnya yang harus kita tambahkan adalah section bodynya.kita cari bagian div id='main-wrapper gunakan Ctl+F biar lebih mudah
setelah ketemu tambahkan diatas bagian itu dengan yang ada dibawah ini saya kasih cetak tebal
Langkah terakhir yang harus kita lakukan adalah mengganti ukuran header-wrapper dan footer.Cari bagian “header-wrapper” dan “footer” seperti yang kita inginkan
#header-wrapper {
width:660px;
dan
#footer {
width:660px;
ganti ukuran seperti yang kita inginkan,seperti yang saya lakukan,saya ganti ukurannya menjadi 750 anda bisa memainkan sekehendak anda
#header-wrapper {
width:750px;
dan bagian
#footer {
width:750px;
selesai........wuih,sebelum anda "save" terlebih dulu anda preview dulu kalau hasilnya menurut anda sudah mantap bin puas boleh anda "save".cihuy.
