Add New Sidebar

Jika sebelum ni kebanyakan post yang saya tulis adalah dalam bahasa english tetapi buat masa sekarang terasa plak nak tulis dalam bahasa Malaysia, mungkin saya akan terus tulis dalam bahasa Malaysia terutama tentang blogger hack. OK kali ini saya menunjukkan cara untuk tambah 'sidebar' baru pada template anda. Kebanyakan template yang diberi oleh pihak blogger mempunyai satu sidebar sahaja, jadi dengan cara yang direka oleh ramani dan hans di blog masing-masing, nak tambah sidebar sudah menjadi perkara mudah, malah anda boleh seberapa banyak sidebar yang anda mahu. Semalam saya baru je selesai convert minima templata to kubrick 4 column template.

Sebelum pergi lebih jauh, saya ingin berkongsi sedikit apa yang ditulis oleh ramani.
#outer-wrapper - This defines the entire blog: kiranya body template tu la.
#main-wrapper - This defines the main column: untuk post korang.
#sidebar-wrapper - This defines the sidebar: sidebar sahaja.

Langkah ini bermulanya sidebar baru korang:

#outer-wrapper {
width: 950px;
margin:0 auto;
...
}
#main-wrapper {
width: 510px;
float: left;
...
}
#sidebar-wrapper {
text-align: left;
width: 220px;
float: right;
...
}
#newsidebar-wrapper {
text-align: right;
width: 220px;
float: left;
...
}

Itu adalah sedikit kandungan CSS. Apa yang perlu korang buat ialah cari kod seperti yang ditunjukkan dan tambah kod berwarna biru tu. Lebar(width) sidebar yang baru ditambah tadi perlu diubahsuai saiznya. Ini kerana outer-wrapper>main-wrapper+sidebar-wrapper. Main-wrapper+sidebar-wrapper perlu lebih kecil dari outer-wrapper. 950>510+220+220. Kod di atas adalah sebahagian daripada template saya. Mungkin korang juga perlu try an error.

Ok bahagian CSS dah selesai, sekarang masuk bahagian koding plak. Lihat kod di bawah.

<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>

Copy and paste kod yang berwarna biru tu. Pastikan paste di atas main-wrapper kerana sidebar tersebut akan muncul di sebelah kiri. Jika korang nak sidebar di sebelah kanan, kedua-dua sidebar sebelah kanan, kod tadi paste di bawah main-wrapper.

Ok dah siap dah. Jika korang tengok kat template>page element, korang ada sidebar baru. Jika korang ada sebarang pertanyaan, korang buleh ajukan di sini. Ni ha screenshot template yang saya katakan tadi.