Cara Tambah Sidebar Baru

Mesti ramai yang tercari-cari macam mane nak tambah sidebar baru. Biasanya template yang disediakan oleh pihak blogger hanya ada satu sidebar. Jadi bila dah tambah sidebar baru tu buleh la letak macam-macam kat sidebar tu, makin cantik la blog korang nanti ya. Sidebar yang akan ditambah nanti tak kisah nak tambah sebelah kiri

sahaja atau kiri kanan atau semuanya sebelah kanan. Sebenarnya saya pernah tulis pasal ni tempoh hari kt sini tapi tak mengapalah tulis sekali lagi, buleh update apa yang patut.Ok untuk bermula sila ikuti langkah-langkah dibawah.

1. Macam biasa buka template>edit HTML. Duplicate kod seperti dibawah(bergantung kepada blog korang).

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Dan berikan nama baru. Sebagai contoh #newsidebar-wrapper. Jadi korang ada outer-wrapper, main-wrapper, sidebar-wrapper dan newsidebar-wrapper. Jika korang tambah lagi satu sidebar, ulang sekali lagi langkah-langkah ini. Untuk float tu, right jika sebelah kanan dan sebaliknya.

2. Kat atas tu baru dalam CSS, sekarang pulak untuk body nya. Copy kod newsidebar-wrapper dan menjadi seperti dibawah. Untuk lebih mudah, jika newsidebar mahu diletakkan disebelah kiri, letakkan newsidebar di atas main-wrapper. Letak dibawah main-wrapper jika newsidebar mahu diletakkan disebelah kanan.

<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section>
</div>

<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
</b:section></div>

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="BlogArchive1" locked="false" title="Blog Archive" type="BlogArchive">
</b:section></div>

3. Sekarang untuk susunan sidebar supaya newsidebar berada pada tempatnya. Pastikan nilai-nilai width untuk outer-wrapper, main-wrapper, sidebar-wrapper dan newsidebar-wrapper. Ikut je formula dibawah ni:

outer-wrapper>main-wrapper + sidebar-wrapper + newsidebar-wrapper

Contoh template saya: 980>580 + 200 + 190
Kurang 20 kan. Nilai 20 ni mewakili gap antara sidebar dan newsidebar, sidebar dan main-wrapper.

4. Dah, selesai dah. Selamat mencuba. Lepas ni kita belaja nak buat widebar.