Custom Search

Monday, November 5, 2007

Menambah column sidebar

Menambah column sidebar
Untuk menambah column sidebar menjadi dua column kita juga harus mengubah column lain seperti lebar header ,lebar comtent, lebar main

sebagai contoh kita kita cari kode sidebar ,ini hanya sebagai contoh karena setiap template kodenya berbeda-beda

#sidebar-wrapper {
width:300px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

karena kita akan membagi sidebar menjadi dua column maka kita akan mengubah lebar kolom yaitu 400 px di kurangi 15px(margin) lalu dibagi dua,berarti 285/2 = 142,5 anggap saja 140 maka kita akan mengubah sidebar diatas menjadi seperti ini

#sidebar-wrapper {
width:140px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
#sidebar2 {
}


kemudian kita cari kode seperti ini contoh:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
tambah kode dibawahnya dengan

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

kemudian klik save template


apabila lebar sidebar terlalu sempit maka kamu bisa menambah lebar sidebar tersebut, tapi harus diingat kamu harus memperkecil lebar main (main-wrapper)atau kamu juga bis a menambah lebar header dan outer,kalau menurut aku lebih baik lebar outer dan header yang di perbesar
seenarnya masih banyak yang harus di ubah tapi ini untuk pembelajaran awal agar kita mengerti bagaimana membuat sidebar menjadi dua column

Apabila anda menginginkan lebar sidebar berbeda, anda dapat mengedit kode diatas:
#sidebar-wrapper {
width:140px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
#sidebar2 {
}
Menjadi seperti ini
#sidebar-wrapper {
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 {
width:150px;
}
#sidebar2 {
width:130px;
}
dengan contoh diatas berarti kita membuat sidebar dengan :
lebar 150px dan 130px tapi untuk kode lebar (width: 140px;) di sedebar-wrapper di hilangkan

0 komentar:

LINK EXCHANGE

Link to Us We'd Link You Back Copy the code below, insert in to your blog
Mau tukar link silakan copy/paste code dibawah ini dan tinggalkan pesan di shoutbox


Free shoutbox @ ShoutMix
 

© template | adbrite