Want to Create a 3 Column Blog on Blogspot?

Are you interested in creating a blog on blogspot (or blogger--not sure why there are two names) that looks like mine? I tried using the templates that were provided, but I just couldn't settle for the narrow 2 column approach. I felt suffocated. As much as I didn't want to go into the code, I had to because I just couldn't bear to look at the super narrow column on my page. I've seen other blogspot blogs with wider widths, so it must be possible! I did a little digging and found this great little tutorial that shows you how to use the Minima template and tweak the html so that you can create a 3 column blog. You can see the article here.

I did, however, tweak the size of the columns from the instructions provided. The 133 px column widths were too narrow for my purpose and taste, so I made them wider. Even though he said not to go past 960 px total, I found other websites that use 980 px and they look fine, so I used 980 px too. I assume with wide screen monitors these days, the majority of my readers will be able able to see everything just fine. You can view the code by going to View-->Page Source (on Mozilla) or something similar on other browsers.

I also reduced the margin sizes to give me more space in both columns, did the math, and everything seemed to work out fine.

In the tutorial above, where he says to replace the code with the code in red, you can use mine instead:

.clear {
clear: both;
display: block;
overflow: hidden;
width: 0;
height: 0;
}

#outer-wrapper {
width: 980px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 485px;
margin-right: 15px;
margin-left: 15px;
text-align: left;
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: 250px;
margin-left: 10px;
margin-right: 0px;
float: right;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 195px;
margin-left: 0px;
margin-right: 10px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


You still need to change all the other code, and where it says 960, you should change it to 980 if you are using my code.

You will have to create a banner in Photoshop that spans 980 px (or 960) and upload it to match your site.

If you have any questions or have any additional things you'd like me to talk about related to blogging or anything else, leave me a comment.