Build a Three-Column Blogger Template!

Update: need a widget-friendly version of this template for New Blogger? See this post.

Some time back, in writing about the many template hacks this blog has undergone, I promised to share how Random Bytes morphed into three columns from the original two-column Minima design created by Doug Bowman. The volume of queries on this topic in my stats tells me that a lot of other Blogger users want this flexibility.

Fortunately, it isn't hard. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:

1. First, back up your current template, just in case anything goes wrong. I usually just copy it to a Notepad file 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. Mine looks 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 <div id="SidebarLeft">) immediately after the <div id="content"> tag. Put a closing </div> 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. 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 I used for this blog:
   #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!

I have provided the complete template here, in case you have problems making the changes described above. Just open the link, view the source code, and save to your desktop or copy and paste into your Blogger template, after deleting the existing code. (Warning: doing this will undo any customization you have done, so you may want to backup first.)

Hope this works for you. If you find these solutions helpful, please consider linking to Random Bytes and sign up for our feed to be sure to receive new articles promptly.