Sebenarnya untuk membuat column baru lebih mudah daripada merubah column yang sudah ada. Kalau membuat sebuah kolom baru berarti kita membuat script yang sama seperti kolom terdahulu, dimana anda tinggal menambahkannya saja. Akan tetapi kalau anda merubah kolom yang sudah ada kita harus menyisipkan kode-kode tertentu didalam kode yang sudah ada.
Sekarang 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 class="sidebarbawah1" id="sidebarbawah1" preferred="yes">
</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" 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" 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 class="sidebarbawah1" id="sidebarbawah1" preferred="yes">
</b:section>
</div>
</div>
yang harus di ingat setiap kode yang di awali dengan <div id= ......harus diakhiri dengan </div>
mengedit template sendiri harus sering mencoba bila terlalu lebar diperkecil kalau terlalu kecil ya di perlebar.
selamat mencoba
LOGIC| Cahyo
Tidak ada komentar:
Posting Komentar