Blogger Three Column Templates Explained

Three column templates are in high demand among most of the bloggers. This is evident from the frequency in which that question gets asked in the blogger forums. I have written up a series of articles that explains the under the hood details of converting a 2 column template in to a 3 column one.

If you are the type of person who likes to know what's happening underneath, before modifying your template, then this article series is for you. (However, if you are happy to do that by just following some steps almost blindly, then I suggest that you find a matching guide for your template from my other series, 3 Column Templates: Step by Step Guides.)

To change your template in to 3 columns with confidence, the first thing you should understand is the basic structure or the skeleton of a Blogger template. That is what the first article in the series, Skeleton of a Blogger Template, covers. The many wrappers such as the outer-wrapper, the sidebar-wrapper etc and their containment hierarchy are explained in that article with simple illustrations.

The second article is the longest in the series. Titled as Adding a Third Column, this article takes you through a step by step explanation of how a generic 2 column skeleton template is converted in to a skeleton 3 column template with two sidebars on the right hand side. The first 3 steps of adding a new CSS selector, providing a div placeholder in the body and expanding the parent containers to accommodate the new sidebar are explained by providing code snippets as well as figures of the intermediate and final steps.

The fourth step of converting in to 3 columns is fixing the wire frame editor to fit the new sidebar inside the Add and Arrange Page Elements view. (This is to correct a problem faced primarily by Firefox users). The third article, Layouts Wire Frame Editor, is focussed entirely on this step.

The fourth and final article, 3 Columns with Left and Right Sidebars, shows the differences between a template that has two sidebars on the right and one with left and right sidebars. In fact, the differences lie only in the first and second steps mentioned above.

So go ahead and read all of them if you really want to know the behind the scene details of 3 columns. However, keep in mind that this series is like a road map given to you when you want to go from point A to point B; but it isn't a set of driving directions that reads out as "take the turn to the right and to the left" and so on.