Blogger hack - 3 column hack code

i know you can find css hacks of new blogger on any site. But they are just half the way. I mean they shows only some changes and your total view will be not same.I have faced the problem while i was doing 3 column change in the new blogger template.They only showed how to make new sidebar and where to put it.Then i have to do some searching on web for CSS changes!

here i m discussing 3 column change for new blogger which i have successfully done!

first of all copy your HTML code of the template to some Editor and after taking backup,do changes in it.

where to add code for sidebar?

first find the code,

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: right;
}

div#sidebar {
width: 300px;
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 */
}

after that add copy and paste it and then change it names like...

div#right-sidebar-wrapper {
margin: 0.1px;
padding: 0px;
text-align: left;
}

div#right-sidebar {
width: 140px;
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 */
}

Then find your original sidebar class in css, like find "#sidebar".
For it, many css templates will be found in which different settings for lists,links,fonts are done.
copy same settings for your new sidebar names "#right-sidebar", so your both sidebars will be same.All settings for both will be same.

Then find code in template HTML,

<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>

And before this add line "<a href='#right-sidebar'>skip to right sidebar</a> |" so your total code will be

<a href='#right-sidebar'>skip to right sidebar</a> |
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>

Then find "<div id='content-wrapper'>" line and add below code after that with empty <b:section> tag.

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

You are done! Your blog will have 3 columns now...1st sidebar, main in the middle and then 2nd sidebar!