Biase nye templates yg org2 nih wat, sume ade 2 column aje. Maybe ade yg tiga, tp jarang lah kot. Serabut gak kalo 2 column,rase panjang sgt blog, jadik cam xbest. Yea kan, ade background die lawa, tp ade 2 column aje...tukar2, kasik jadik 3.
Ikut step berikut
1. Anda pergi ke Layout >>> edit HTML (pastikan box kecik kat Expand widget templates tidak bertanda)
2. Pi kat kotak code HTML (kalo xtahu yg mane satu,tgk sini). Tekan kat keyboard anda ctrl dan F . Pastuh akan keluar kotak search kat bawah browser, taip kat situ sidebar-wrapper . Ia akan memudahkan anda mencari code mcm di bawah ini :
#sidebar-wrapper { width: 220px; float: right; 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 */ }
Code kat atas nih utk column anda yg sebelah kanan dlm template yg sedia ada. Ade yg sebelah kiri kan, so ade la stated kat situ left. Anda copy perenggan code ini (dari # sampai }) mcm dlm gamba bawah nih :



Lepas tuh, bawah dr perenggan (yg anda copy) nih, anda paste kan ape yg anda copy itu. Then ubah code yg anda paste tuh. Kalo kat atas die tulis right, bawahnye anda taip left, begitulah sebaliknye. Tgk contoh seperti dlm scroll box di bwh ini :
#left-sidebar-wrapper { width: 220px; float: left; 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 */ }
Bile di satukan, jadik lah contohnye begini :
#sidebar-wrapper {
width: 190px;
margin:0 auto;
padding:0 0 5px 9px;
float:left;
font:90% verdana;
line-height:1.4em;
overflow: hidden;
}
#right-sidebar-wrapper {
width: 190px;
margin:0 auto;
padding:0 0 5px 9px;
float:right;
font:90% verdana;
line-height:1.4em;
overflow: hidden;
}
3. Pastuh taip kat search(ctrl+F), code di bwh nih :
<div id='main-wrapper'>
Code kat atas nih terletak kat bahagian bawah skali dlm code HTML template.
Pastuh copy code dibawah, dan paste kan SEBELUM code diatas :
<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
INGAT : Kalo column baru anda belah kanan, anda perlulah gantikan perkataan left kpd right. Begitu juga sebaliknya.
Problem Solution
Problem 1 :
Selepas anda menukar code HTML anda, anda akan dapati, side anda bertindih. Ini disebabkan oleh page anda xcukup luas utk menempatkan column yg baru. So kene adjust la sket. Carik code kat bawah nih :
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
Tukarkan nombo kaler merah tuh kepada 880 ke...atau up lg, smpai layout anda jadik gini:

Klik kat Page Element, sini akan display susun atur blog anda. Kalo da elok tersusun camnih, tanpa yg bahagian tengah tuh mengundur ke bwh, kire orait la tuh. Kasik kiri,tgh,kanan dlm aras yg same.
Aku nye kes..aku up smpai 1000px.
Dan lagi satu, anda perlu(jika perlu) ubah kelebaran header die (bahagian atas page). Tukarkan nombo kaler merah . Kalo outer-wrapper (mcm kat atas) 880px, anda buat la jugak 880px, ikut kesesuaian kehendak anda.
#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
Problem 2 :
Anda akan dapati column baru anda, rapat sangat dgn column yg tgh. So kasik kan diorg tuh space.
#main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }
Anda carik code di atas, pastikan margin jadik 20 px. Kalo left, maksudnye, column tgh akan menginjakkan dirinya dari tepi kiri sebyk 20px. Kalo korang nak column korang menginjak dr kanan, tukarlah kpd right, dan float pon misti right gak.
Akhir skali >>> SAVE TEMPLATE
SEKIANLAH AL-KISAHNYE....
ADA KEMUSYKILAN?? MAYBE AKU SILAP AJAR KE...KORANG P LA SITE NIH >>> MAKING 3 COLUMN
KORANG TRY AND ERROR LA..SAMPAI BETUL2 JADIK CANTIK TERSUSUN CAM KORANG NAK.
SELAMAT MENCUBA!!! (ngantuk mode)
Read more...