2 column >> 3 Column template

Assalamualaikum Warahmatullah & Selamat Sejahtera


Dah lame tertangguh sebenarnya, nak kongsi ngan korang cenggane nak tukar 2 column blogger template kepada 3 column template. Cam aku punye ni la. Best sket la kan, byk sket isik korang leh letak dalam sidebar. Actually aku bukan la pakar pun sebenarnya, ni pun aku belajar kat internet gak.Oleh kerana kawan udah bertanya, so aku kongsi sket, bulih kan. Aku tahu, kawan2 ku ini malas nak bace, so aku nak tunjuk gak.haha. Kene la bace jugak kan..hahaha


Basically, sebelum start korang nak tukar design bagai2 sebab ada yang tanya camne aku buat design strip2 ni, kene tukar dulu rangka dier okes. Paling senang sekali, korang tukar dulu template ni gune bloggernye template, minima.


1. Tukar template kepada blogger template minima. Go to

Layout >> Pick New Template

2. Sekarang sesi meng'edit' html code. Jangan risau senang je.

Layout >> Edit HTML >> expand widget templates unchecked

3. Pehtu, korang cari coding ni

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

copy bulat2, pastu paste betul2 bawah dier. Before dat, tukar perkataan kaler merah tu, kepada

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}

4. Selepas tu, scroll bawah lagik, carik coding ni plak.

<div id="main-wrapper">

pastu korang paste coding kat bawah nih, paste je ar cam tak bese plak.haha. paste before coding kat atas tu tau. JANGAN SILAP...ea

<div id='left-sidebar-wrapper'> <b:section class='sidebar'
id='left-sidebar'preferred='yes'/> </div>

5. Pastu, sekarang ni, kite kene tukar saiz rangka kita, supaya bleh tampung laa sidebar yang baru tu.carik code ni, pastu tuka yang kaler pinko tu k

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 960px;
margin:0 auto;
text-align:$startSide;
font: $bodyfont;
}

lagik satu, jangan lupe tukar saiz header sekalik okes, cam yang kaler kat bawah ni

#header-wrapper {
width: 960px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

6. Supaye korang punye sidebar sume2 tu tersusun elok je, carik coding ni, pastu tuka code yang macam aku hilite tu k.kalo tader, tambah je.

#main-wrapper {
width: 490px;
margin-left: 10px;
margin-right: 10px;
float: $startSide;
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 */ }

nanti korang ade camni:

7. Dah pun, penatla! hahaha. ni la hasilnye..

before

after

p/s: aaarrr, saye tahu saye ade janji ngan seseorang nak buatkan, tapi tak ingat. eleh, tapi dier pun tak bagi satu balang cloud 9 plus.hehehehehe