Sebelumnya, silahkan cari kode css #outer-wrapper
. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
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: 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 */
}
Penjelasan :
#outer-wrapper --> kode untuk lebar halaman blog.
#main-wrapper --> kode untuk lebar postingan blog
#sidebar-wrapper --> kode untuk lebar sidebar blog.
Untuk
merubah lebar halaman blog, temen2 tinggal mengganti angka – angka yang
terdapat pada setiap kode css diatas. Semakin besar angkanya, maka
halaman blog pun semakin lebar. Contoh : Misalnya, temen2 ingin
mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti
jumlah angka pada tag width untuk kode css #outer-wrapper
menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Nah…setelah mengganti kode #outer-wrapper
, jangan lupa untuk mengganti kode tag width pada #main-wrapper
dan #sidebar-wrapper
juga. Karena jika tidak diganti maka jarak antara halaman posting dan
sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga
angka pada tag width #main-wrapper
dan #sidebar-wrapper
menjadi 500px untuk #main-wrapper
dan 400px untuk #sidebar-wrapper
. Sehingga menjadi :
#main-wrapper {
width: 500px;
float: $startSide;
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: 400px;
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 */
}
Untuk
merubah lebar kolom pada #main-wrapper dan #sidebar-wrapper, harus
sesuai dengan lebar kolom pada #outer-wrapper. Misalnya, lebar halaman
blog 950px maka jumlah dari lebar postingan dan sidebar blog harus
kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan
sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya.
Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.
Nah…setelah
merubah lebar bagian blog diatas, ada satu bagian lagi yang harus
dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode #footer-wrapper
dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper).
Jika
semua bagian telah mengalami perubahan, maka sebelum nge-save template
lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau / preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang telah terjadi pada template. Ok….selamat mencoba.
sumber : http://kursus-blog.blogspot.com/2008/08/tips-dan-cara-memperlebar-halaman-blog.html