I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand. Three Column Blogger was then born. Update 1/2/10: Thank you all so much for your great comments, encouragement and suggestions. There are now over 300 comments, and Blogger has appended them - you'll need to click on the "more comments" link at the bottom of the page to post a comment or read new replies. I still read all of the comments, and I try to incorporate your suggestions into the main post. This has become a better resource for all as a result. As always, links are appreciated. Cheers!
These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Minima is one of the simplest templates to modify, and it's also easy on the eyes, so both readers and bloggers like it.
This post is for adding a third column to Minima in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima in Classic Template version here.
So let's get started! First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down through the code until you see :
/* Header
-----------------------------------------------
(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)
Now, change the width of the "header-wrapper" from 660 to 940;
#header-wrapper {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}
That piece of code should now look EXACTLY like this:
#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Also, at the bottom of the same Header section, change the max-width from 660 to 940:
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
