Google
 

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
Tukar Link dan Promosi Website - Webkios Direktori gratis untuk promosi dan tukar link website indonesia dengan berbagai macam kategori. Tambahkan website anda sekarang. Klik disini! Free online advertising Asia Top Websites and Blogs pendapatan gratis Best Malaysian Sites free search engine website submission top optimization
Submit your website to 20 Search Engines - FREE with ineedhits!

Search Engine Optimization and SEO Tools
Submit Your Site To The Web's Top 50 Search Engines for Free! Blogarama - The Blog Directory Bigger Blogger Web Links Directory DMOZ Zilla Free content Directory Free Websites Links Directory.
Free web directory, find real estate, home & decor, Internet, entertainment links. NEW HOPE LINK DIRECTORY - Add Your Web Site To The Link Directory,
Free Directory link Exchange,Swap Link
With Outher Members,Reciprocal Linking Exchange. ToolBug.com - Free Webmaster Tools and Submission Business Directory - Search Compare Buy
Free Advertising Forum, Free Link Exchange, Free Business Directory, Free Products, Free Vouchers
 

© template | adbrite