7/31/2019 Setting Up a Three Column Blog

1/5

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 shallremain - 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 typein /* Header and then click the "next" button)

Now, change the width of the "header-wrapper" from 660 to 920;

#header-wrapper {width:660px; 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;

7/31/2019 Setting Up a Three Column Blog

2/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;

7/31/2019 Setting Up a Three Column Blog

3/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

7/31/2019 Setting Up a Three Column Blog

4/5

Change the width of the "footer" from 660 to 920.

#footer {width:660px;

7/31/2019 Setting Up a Three Column Blog

5/5

So, after you do that, the newly modified section should now look like this:

And you are a now master Minima coder, because you're done! Hit preview to see your new three columnMinima layout, and then save the template. Now you can go into the "Layouts" and add a new googlegadget of your choice. You can also read this article for instructions on how to adjust your margins tomake 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 StyleName: MinimaDesigner: Douglas BowmanURL: www.stopdesign.comDate: 26 Feb 2004Updated by: Blogger Team----------------------------------------------#navbar-iframe {display: none !important;}

Best of luck with your blogging.

Page 5 of 5