How to add a third column to your template

Having a third colum template for your blog can be very helpful so that you can add more widget and add more advertisement to it.There's a lot of available template that you can get in the internet but have you ever wonder how they make it? In this post I will show you an example of how you can add a third column to your template and lets have the minima blogger template design as an example since it has a very simple structure and anyone can follow the following steps in adding a third column to your template.

Step 1. Sign in to your blogger acount and go to the edit HTML. Try to be familiar with the codes and look for something that look like this.

#main-wrapper {
width: 410px;
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 */
}

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

Step 2. Now you need to change the #sidebar-wrapper to #right-sidebar-wrapper for you to be able to add another column which we will name as #left-sidebar-wrapper. Your code will now look like this.( The new code is added to just above the #main-wrapper code)

#left-sidebar-wrapper
{width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#main-wrapper {
width: 410px;
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 */
}

#right-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 */
}

Step 3. In order for the 3rd column to fit in your template you need to change the size of it because another 220px is added to your template. Again look for this codes in your HTML and change the width 660 to 860.

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

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Step 4. Now that you have finished defining a third column to your template. Your are almost ready you just need to add one last code and again do not forget to change the sidebar to right-sidebar. Try to look for the code below.








(Do not forget to change sidebar to right-sidebar so that it will look like this)

Step 5. Now Add the code below just above the
and save your template.When you view your page element section a new column is now ready for you to add your widgets.

links:
List available page elements you can add to you blog
New and Unique template for your blog