The OP on the GD thread The Straight Dope on the Mayan Calendar has a blog through Google Blogger.
In view source I can see that he’s using one of the standard templates that Google makes available, Minima Stretch. But Minima Stretch is a two-column template and he’s managed to tweak it to display three columns.
How did he do that? Where in the code would I find the commands? How would I go about creating a three-column blog in that format if I wanted to do so?
First, let me say that i’m no expert with Blogger templates. In fact, i’ve never looked at one before now. But they seem to be based on Cascading Style Sheets, which assign certain characteristics to different elements in an HTML page.
As far as i can tell, this is the CSS that gives the guy three columns on his blog:
#outer-wrapper {
margin:0;
padding:10px;
text-align:left;
font: normal normal 89% Georgia, Serif;
background-image:url("http://img119.imageshack.us/img119/4164/1205148632galaxy4kb6ty4.jpg");
background-repeat:no-repeat;
background-position:97% 2%;
background-attachment: scroll;
}
#main-wrapper {
margin-left: 2%;
width: 44%;
float: left;
display: inline; /* fix for doubling margin in IE */
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 {
margin-right: 2%;
background-color:#F0F0F0;
width: 25%;
float: right;
display: inline; /* fix for doubling margin in IE */
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 */
}
#sidebarLeft-wrapper {
margin-left: 2%;
background-color:#F0F0F0;
/* border-style: solid;
border-width:1px;
border-color: grey; */
padding: 4px;
width: 23%;
float: left;
display: inline; /* fix for doubling margin in IE */
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 */
}
The outer-wrapper div is a container that holds not only the three columns, but also the area containing the headers (the main title, etc.).
The main-wrapper identifies the central column, the main area where the content of the blog is posted.
The sidebar-wrapper is the right column, which contains some images, article links, and some advertising.
And sidebarLeft-wrapper is the left column, which contains his tag cloud.
To mimic what he has done, you’d need to add these sections to the CSS for the page, and also incorporate them into the HTML. I’m not sure exactly how you go about doing that in Blogger. You have to be careful, too, because adding stuff to a style sheet without knowing what all the other elements in the style sheet are doing can break your page and make it look like a mess. My recommendation would be to do some reading about CSS, so you know what you’re looking at when you try and read a style sheet. Here are a few sites i found very useful when i first started out:
http://www.htmldog.com/guides/cssbeginner/
I would also highly recommend using the Firefox browser, and installing the Web Developer add-on. It’s an excellent tool for helping to understand the way web pages are laid out. The Edit CSS function allows you to make changes to the CSS of a page, and see the resulting changes, without actually making any permanent changes that can mess up the page. It all happens right there in your browser.
Now, as i said, this is my first experience with Blogger style sheets, but to be quite honest, the CSS and the HTML of that site look like a damn mess to me. Now, it may be that this is an unavoidable side-effect of providing style sheets for blogging, or for any site where people who don’t know HTML want to be able to alter their pages. It’s probably the case that the style sheets can be altered using some sort of control panel in Blogger (is that true?), and if so, they probably care more about usability than about conforming to HTML/CSS standards.
If you need excellent CSS scripts pre-made go to
Go to the CSS Tab. I’m not sure it’ll work with Google Blogs but it’ll give you excellent scripts with tweaks that work with all browsers and different versions of said browsers
Also, there are quite a few people on the web who have examples and tutorials for three-column CSS layouts. The most difficult thing to do in a three-column CSS page is to have three equal-length columns. If you don’t care very much about column length, and are happy to have some columns longer or shorter than others (like the blog you linked to), then it’s not too hard. But if you want your columns to all end in the same place, it requires a bit more effort.
You should look at a few three-column layouts and see what type of CSS they use. The advantage of looking at examples is that the code will be much cleaner and easier to understand than that blog.
Try this one, for example. You can see that he has three perfect columns, in the sort of layout you want. Check out his CSS (you’ll find it in the HTML, in the <head> section, just after the metadata), and you’ll see that it’s much cleaner than that of the blog. He also has a little graphic on his page that shows the nested DIV structure, i.e., how the containers are laid out by the CSS.
Here is another tutorial.
Yon can Google css three column layout tutorial and find others. You’ll notice that not all of them tell you exactly the same thing, and that’s because you can use different strategies to get similar results using CSS. One thing they will pretty much all have in common, though, is use of the FLOAT and CLEAR commands. These can be tricky to understand, so you should try to read up on them a little bit.
You also have to be a bit careful that your CSS works in all browsers. For a long time, it was difficult to design column layouts that would work in IE and other browsers. The difficulties have been reduced with the introduction of IE7 and IE8, but you still need to test your page in different browsers to make sure it looks OK in all of them. Especially problematic are IE5 and IE6.
Thanks. I went into Google Blogger Help to look at their suggestions for three-column templates but their pages are so badly written I couldn’t figure out how to translate them beyond the specific examples given. Those tutorials look to be much more straightforward.
You can go into the Blogger template to make changes, and I’ve learned just enough to tweak my blog to make it somewhat more attractive than the basic template. The problem with Blogger is that nothing is ever labeled or explained. You can leave them as is and get something that works or you can get as fancy as you like with CSS, but small changes by beginners are not well supported.
My advice is switch to Wordpress. Either on Wordpress.org or self-hosted. The number of free themes in every style imaginable is unreal. And they are pretty easy to modify if they don’t do exactly what you want. Add in the plugin and widgets that are available to customize your pages and there is an embarrassment of riches. And you can even import your old blog from other places, like Blogger.