How to Make a Three-Column Blogger Template

In the recent comments, many people are curious in how to make a three-column blogger. I admit that three-columns blog is more blogger friendly that two-columns blog, since it is much more spacious and you can put more materials you want into it. There are many free and ready-to-use three columns blog available in the internet, and you can easily find the one that best suit you. However, what about if you want to turn your existing blog into a three-column one? Is it possible?

No worry, it is not too difficult. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:

1. As with other modifications, you should first back up your current template into somewhere else , just in case anything goes wrong. I usually just copy it to a MS Word document on my desktop. (Open the Template tab, click inside the template area, press Control+A to select the entire document, and Control+C to copy; then switch to Notepad, press Control+V to paste the document, and Save.)

2. Go back to your Blogger template and scroll to the embedded stylesheet at the top. Add a new style to format the left-hand column. The template should look like this:

#SidebarLeft {
position:relative;
width: 20%;
padding-right:.5%;
float:left;
margin-left:.5%;
clear: none;
text-align: left;
}

3. Locate the HTML part of the document. To create a left-hand column, as in this blog, open the SidebarLeft div (type ) immediately after the tag. Put a closing before the Main div. This partitions off the left 20% of the screen for a sidebar — now you can put any content you like between this pair of divs. In this blog, I have placed the Archives on the left, along with categories, popular posts, and RSS feed icons. (Note: If you are using another template, the style names may differ, but the same principles apply.)

4. Return to the top of the template and tweak the other main content styles to accommodate the new design element. This time, you'll need to make the central text area narrower and set its left and right margins to auto. You may also need to reduce the width of the existing right-hand column. Experiment with width, padding, and borders of the styles until you have a design that works. Here are the settings recommended:

#content {
width:78%;
margin-top:15px;
margin-left: auto !important;
margin-right: auto !important;
padding:0;
text-align:left;
}
#main {
width:53.5%;
float:left;
padding-left:1.5%;
padding-right:1%;
border-left:1px dashed #ccc;
border-right:1px dashed #ccc;
}
#sidebar {
width:19.5%;
float:right;
margin-right:.5%;
padding-left:.5%;
}

5. Optional: There may be other styles based on the original Sidebar style that format elements within a column. In Doug Bowman's Minima template, for example, the #Sidebar style is specified with three contextual selectors (ul, li, and p). These control the formatting of bullets and paragraphs in the sidebars. If you want similar formatting for the other side of the screen, locate and clone these styles under the #SidebarLeft designation, as follows:

#SidebarLeft ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dashed #ccc;
list-style:none;
}
#SidebarLeft li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#SidebarLeft p {
color:#666;
line-height:1.5em;
}

6. Save your template changes and preview your blog. If you're satisfied, re-publish and share your handiwork with the world!

This is the procedures you need to make your three column blogger template. However, to me, I always think it would be better if you choose a ready-to-use template in the web. They should be in good quality and easier to use.

Article From: Joe Li