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
Monday, November 5, 2007
Menambah column sidebar
Diposting oleh
CATOER
di
2:45 AM
Subscribe to:
Post Comments (Atom)






































































0 komentar:
Post a Comment