Mewujudkan 2 Jenis Sidebar Di Satu Sisi Yang Sama, Satu Besar, Dan Satu Kecil

Menjelaskan maksud tajuk kadang-kala sangat susah. Lihat contoh page element di bawah. Anda akan dapati sidebarnya di sebelah kanan. Tapi, satu besar, berada di atas, dan 2 lagi sidebar kecil, berada di bawahnya.

Seorang kawan bertanya, bagaimana hendak membina sidebar sebegini?


Pertama, cari kod ini.

Header wrapper, tukarkan dari 660px kepada 980px. Supaya headernya jadi besar. Kemudian cari kod ini.

Outer wrapper, tukarkan dari 660px kepada 980px. Main wrapper, tukarkan dari 410px kepada 500px.

Kemudian lihat sidebar wrapper.


Copy kod sidebar wrapper itu seperti di bawah, sebanyak 2 kali, supaya ada 3 sidebar. Kekalkan kod sidebar yang asal, cuma ubah witdh-nya, 220px kepada 210px. Sidebar yang di-copy tadi, tukarkan namanya kepada sidebar2 dan sidebar3. Sidebar2 saiznya 210px, dan float-nya left, sebab sidebar asal float-nya right. Adapun sidebar3, saiznya 460px.


Konsepnya mudah, sidebar3 akan 'meliputi' sidebar 1 dan 2.

Oya, jangan lupa besarkan footer juga, dari 660px kepada 980px.


Sekarang, cari [div id sidebar wrapper]. Delete-kan b widgetnya, dan kekalkan yang lain.


Setelah delete, baki kod di [div id sidebar wrapper] akan tinggal seperti di bawah.

Copy baki kod itu sebanyak 2 kali, menyebabkan div id sidebar akan ada 3. Satu yang asal, dan 2 yang baru. Namakan yang baru itu sebagai sidebar2 dan sidebar3.

Lihat sidebar3 yang baru itu. Selain [ div ] yang berada di bawah sekali, semua kod akan dibawa ke atas.

Hasilnya akan jadi seperti di bawah.

Oleh kerana kita mendelete b widget, maka, kalau kita klik save template sekarang, maka paparan ini akan muncul - bertanya mahu delete-kah?


Kalau anda pergi ke page element sekarang, hasilnya sudah kelihatan, iaitu, Mewujudkan 2 Jenis Sidebar Di Satu Sisi Yang Sama, Satu Besar, Dan Satu Kecil


Selamat mencuba