new layout

It's been a while I have not updating my blog. My quilt is still in progress. hehehe...It's pending actually since I don't have few stuffs and it's quite busy these few weeks..(this meant for my office work actually..too many cases!).But still I want to update something today since I have done few changes for my blog. Only a minor changes. I changed my blog's template from 2 column into 3 column template and rearrranged all the widgets based on this new template.

Ermhh...maybe I can just update in here on how I did all these changes. First of all, I’m using the minima template where it has two column template. It has few parameter and it is the easiest and the simplest template to customise. The reason why I want to change it to three columns is because I want to maximise the upper page of my blog with the important things and reduce my time for scrolling down in order to search bla bla bla... (hehehehe..)

Here we go..8 simple steps!

1. Go to Template>Edit HTML, and leave the "Expand widget templates" box unchecked.
2. Find this section in the HTML code:
   #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 */ }
   Copy this entire section, and paste it directly below. You need to change few elements in the section that you have pasted. So the second section will become like this(please refer the one that I highlighted in red).
   # 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 */ }
   So, now we will have a new sidebar at the left of the layout.
3. I add another code which is highlighted in green before this section highlighted in red.
   {div id='left-sidebar-wrapper' }{b:section class='sidebar' id='left-sidebar' preferred='yes'/ }{ /div}
   {div id='main-wrapper'}
4. The next thing I changed was the width of the wrappers. Find all these 3 different section in the HTML code:
   #outer-wrapper {width: 660px;
   #left-sidebar-wrapper {220px;
   #header-wrapper {660px;
   I changed all the value (highlighted in red) to 880px
5. Save the new template now and add one or two elements(widgets) to the new left side bar..
6. Then I did some changes in the main wrapper by adding the codes define in red below.
   #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 */ }
7. Since there is a margin space of 20px between the left-sidebar and the main column, I did some changes again for the outer-wrapper by changing the width from 880px to 900px.
8. Save my new template and walla..now I’m using my new 3 column template!
   Hope this tips can help!

p/s: For step #3, make sure to change this symbol '{}' to '<>' in your html code. Sorry for any inconvinience caused. Somehow the correct symbol cannot be shown in this entry as a fully code.