blogspot template modifications 3 column

blogspot template modifications 3 column

Why would anyone want to change a 2 column template to a 3 column template manually when there are loads of free blogspot templates out there that does not cost money?

Good money-saving question. No answer here.

In this blogspot template modifications 3 column issue, I attempt to add 1 column to the 2 column common Blogspot template to create a 3 column blogspot template modification that you can use when you create a new blogspot site using Blogger.

This blogspot template modifications exercise is to remind myself of the changes that need to be done for a three column design.

Here is the blogspot code for blogspot template modifications 3 column:

Note: This formating applies to Minima template from blogspot.

Put this below the present #sidebar code in your blog under the #sidebar { thingy.

                       /* left side column

                         ------------------------- */

#newsidebar-wrapper {

width: 200px;

float: left;

padding: 0 1px 0px 0px;

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 */

}

Next put this inside as well, if it is not already inside.

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

Finally add this:

div id=’newsidebar-wrapper’>
b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
b:widget id=’Text1’  locked=’false’ title= ‘’  type=’Text’/>
/b:section>;

/div>

to above of:

div id='main-wrapper'>

[Note that the inverted commas must be straightened out. the div tag needs to be closed <  >  properly.]

Next to modify outer-wrapper size to a larger width like 900 or more:

#outer-wrapper {
  width: 900px;

Looks pretty complicated.

Hope you find my 'blogspot template modifications 3 column' site useful.