New Section in Layout, Contoh

Seperti yang anda lihat diruang atas blog ini, saya telah menempatkan dua section yang berbeza – satu untuk ruang Tajuk Blog dan Keterangan Blog dan satu lagi untuk menempatkan wijet B3Lima/amazon. Tujuan saya melakukan susunatur tersebut adalah untuk memberi lebih ruang untuk tulisan blog dan maklumat lain.

Perkara tersebut saya hasilkan dengan melakukan sedikit perubahan pada aturcara HTML untuk kotaklaman dalam atas (Header-Wrapper) dengan menambah kotakelemen (Section). Langkah yang perlu dibuat adalah seperti berikut:

1) Buat definasi kotakelemen baru seperti berikut;

#header {
width:150px;
margin: auto;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
float: $startSide;
}

#atas {
width:730px;
margin: auto;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
float: $endSide;
}


2) Ubah lebar (width) kotakelemen Header dan kotakelemen baru supaya jumlah lebar keduanya tidak melebehi lebar kotaklaman dalam atas (header-wrapper).

Sebagai contoh, laman saya mempunyai lebar kotaklaman dalam atas 890px. Oleh itu saya telah tetapkan lebar kotakelemen Header adalah 150px dan lebar kotakelemen baru adalah 730px. Saya berikan sedikit ruang antara kotakelemen tersebut sebanyak 10px.

3) Tambah ciri ”position” kotakelemen supaya kotakelemen Header akan berada diposisi kiri dan kotakelemen baru diposisi kanan. Ini dilakukan dengan meletakkan ciri ”Float”

4) Lain-lain ciri seperti margin, padding dan sebagainya perlu diserasikan supaya kedua-dua kotakelemen nampak selari dan bersesuaian.

5) Kaitkan kotakelemen baru tersebut diruang yang hendak ditempatkan. Contoh seperti dibawah

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
</b:section>

<b:section class='atas' id='atas' preferred='yes'>
</b:section>
</div>