Setting up a Three Column Blog

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 920; #header-wrapper { width:660px; <-------change to 920 margin:0 auto 10px; >border:1px solid $bordercolor; } That piece of code should now look EXACTLY like this: #header-wrapper { width:920px; margin:0 auto 10px; border:1px solid $bordercolor; } Also, at the bottom of the same Header section, change the max-width from 660 to 920: #description { margin:0 5px 5px; padding:0 20px 20px; border:1px solid #eee; border-width:0 1px 1px; max-width:660px;<-------change to 920 font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999; }

Page 1 of 5

That piece of code should now look like this: #description { margin:0 5px 5px; padding:0 20px 20px; border:1px solid #eee; border-width:0 1px 1px; max-width:920px; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999; } So far so good. Next, scroll down (or use CTRL+F) to where it says: /* Outer-Wrapper ----------------------------------------------- */ Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 920, and (2) change the "main-wrapper" width from 410 to 480 #outer-wrapper { width: 660px; <-------change to 920 margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 410px; <-------change to 480 float: $startSide; 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 */ } Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else. Update: the Google Gremlins may let some of you get away with using "left" instead of "$startSide" and "right" instead of "$endSide".

Page 2 of 5

#left-sidebar-wrapper { width: 220px; float: $startSide; 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 new code block should look exactly like this: #outer-wrapper { width: 920px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #left-sidebar-wrapper { width: 220px; float: $startSide; 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 */ } #main-wrapper { width: 460px; float: $startSide; 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: 220px; float: $endSide; 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 */ } Then scroll way down the page to the footer section (or use CTRL F), it looks like this: /* Footer ----------------------------------------------- */

Page 3 of 5

Change the width of the "footer" from 660 to 920. #footer { width:660px; <-------change to 920 clear:both; margin:0 auto; 10px padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } At this point, believe it or not, there are only two more steps. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot). Anyway, in the same footer section that you're now in, scroll down until you see: <div id='content-wrapper'> Then, locate the the "main wrapper" id a few lines below it. It looks like this: <div id='main-wrapper'> Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below: <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/> </b:section> </div> Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. Update: If you get an error message that says the widget ID should be unique, you have an existing blogger button already loaded in your original sidebar and you'll have to delete that one temporarily. But don't worry, you can customize all of your sidebars when you get them all set up. If not, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish.

Page 4 of 5

So, after you do that, the newly modified section should now look like this: <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/> </b:section> </div> <div id='main-wrapper'> And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article for instructions on how to adjust your margins to make more space in between your columns. If you have any trouble with your "nav bar" or would simply like to turn it off, insert the following code (in red) exactly where I have placed it: Blogger Template Style Name: Minima Designer: Douglas Bowman URL: www.stopdesign.com Date: 26 Feb 2004 Updated by: Blogger Team ---------------------------------------------#navbar-iframe { display: none !important; } Best of luck with your blogging.

Page 5 of 5