Custom Search

Wednesday, November 7, 2007

membuat column baru

membuat column baru

Sebenarnya untuk membuat column baru lebih mudah dengan merubah column yang sudah ada,sehingga kita tinggal merubah kodenya,anggap saja kita akan membuat 2 column dibawah sidebar : untuk contoh kita akan merubah column sidebar:

#sidebar-wrap {
width:400px;
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 membuat dua column dibawah sidebar tersebut maka kita harus membagi dua lebar sidebar diatasnya bahkan bisa lebih kecil karena harus dikurangi margin pinggir.
Ini hanya contoh:
1. Ganti kode #sidebar-wrap dengan kode baru ...contoh: #sidebarbawah-wrap
2. ubah lebar sidebar width:400px; menjadi width:180px;
3. untuk margin terserah apakah mau di rubah atau tidak

Hingga menjadi seperti ini:

#sidebarbawah-wrap {
width:180px;
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 membuat dua column letakan dibawahnya kode
#sidebarbawah1 {
}
hingga menjadi seperti ini

#sidebarbawah-wrap {
width:180px;
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 */
}
#sidebarbawah1 {
}

sekarang kita masukan kode tersebut terserah anda yang penting sesudah <head> dan sebelum </head>
berarti kode yang harus kita buat selanjutnya adalah:
<div id='sidebarbawah-wrap'>
<b:section class='sidebarbawah' id='sidebarbawah' preferred='yes'>
</b:section>
</div>
<div id='sidebarbawah-wrap'>

</b:section>
</div>

kemudian kita cari kode yang diawali dengan <div id='sidebar-wrap'>
Contoh:
<div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='NewsBar2' locked='false' title='' type='NewsBar'/>
</b:section>
</div>

letakan kode diatas diantara </b:section> .... </div>

hingga seperti ini
<div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='NewsBar2' locked='false' title='' type='NewsBar'/>
</b:section>
<div id='sidebarbawah-wrap'>
<b:section class='sidebarbawah' id='sidebarbawah' preferred='yes'>
</b:section>
</div>
<div id='sidebarbawah-wrap'>

</b:section>
</div>
</div>

yang harus di ingat setiap kode yang di awali dengan <div id=......harus di akhiri dengan </div>

mengedit template sendiri harus sering mencoba bila terlalu lebar diperkecil kalau terlalu kecil ya di perlebar.. haaa.haaaa.
selamat mencoba

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