Step-by-Step Image Guide to Blogger templates Part 4: Nitty Gritty of 3 Column Layout

Understanding Blogger Templates would give you more control over your blog's layout. For part 4, we'll be changing the template from a 2 column to a 3 column.

Lets start!

As mentioned before, there are a few things that make up the structure of Blogger pages.

Explain:
< div id='outer-wrapper' > - the skeleton
< div id='header-wrapper' > - the header
< div id='content-wrapper' > - blog entry area & area for archives+ followers

< div id='main-wrapper' > - the blog entry area, both above & below
< div id='sidebar-wrapper' > - the 'followers' & archive area
< div id='footer-wrapper' > - the bottom area of page.

We'll need to change values in main-wrapper, sidebar-wrapper, header-wrapper & footer-wrapper

Scroll down to find Header-Wrapper:


change it to 700


Look for Outer, Main & Sidebar wrappers


Change values to 700 for Outer(same as header) & 450 for Main, 110 for sidebar.
- similar to below:


Look for footer & change it 700 (same as header)


Now scroll down more and find the following
Sidebar-wrapper
- copy and paste the code, remove any widgets. SAVE.


Also, change the value for 'padding'. that'll prevent the 2 sidebars from being too crammed together



After save, go to Layout > Page Elements > you'll notice a new sidebar.



And that's how simple it is.
Just follow the rules:

header-wrapper, outer-wrapper & footer-wrapper - to have same width for better alignment top to bottom.

main-wrapper - the blog entry area

sidebar-wrapper - just add another with ID changed to 'sidebar2' or whichever.

The End!

Part 5: 3 Column Template with 1 & 2 sidebars options

Step-by-Step Image Guide to Blogger templates

Part 3: Include Latest Comments, Latest Updates panel (using New format in Blogger)
Part 2: Add a Ad widget under Header
Part 1: Introduction to layout