3 Column Minima Templates for blogger.

As a new blogger we always wanted to improve our site and to make our readers more interested, convenient and comfortable in reading the blogs. Below I will give you some techniques on how you can improve your site or your blogger. Just read it with comprehension and pay more attention to it. And you will definitely learn and use all the techniques written below, that will somehow help you in improving your blog. But if you don't want to go on to this tutorial, just want the 3 column minima template there's the easy way on doing it just download the 3 column minima templates that i made there are 4 colors to select just right click on the title and then save.

3 Column Minima White



3 Column Minima Black



3 Column Minima Blue



3 Column Minma Ochre

First let us see the picture below, as you can see in the picture you can notice that it is the normal template for blogger blog which you can probably find in Pick New Templates.you could pick any color you want, There are four type of colors in Minima templates and you could easily change the color of your background and fonts in "Fonts and Colors"section.



I use the Minima white template for my sample. See picture below, you can see a circle which I place around the the side bar on the right and the post on the left, That's the normal template it doesn't have any side bar on the left, Now let us try to do it a little more interesting let's put another side bar on the left, as a 3 column template and stretch it or Expand the wrapper the header just follow the instruction below...

Ok first pick any type of color on minima template then click save when your done, go to "Edit HTML"you'll see it after the Fonts and colors or before Pick new template. but if you already have the minima template and just want to expand your template or just want to put side bar on the left you could also use this tutorial. Now before you edit your template always save a backup of your template in your computer so if something goes wrong you could just upload it back when you need too, Click on "Download full template" then save it. see the picture sample below.



Adding a New Sidebar

Now let's start putting another side bar first you need to scroll down and search for the highlighted text.
"TIP" the easy way to search for HTML or words just " hold Ctrl and press F " you will see a box like this...


If your using "Mozilla Firefox" the box is on the bottom of the page shown like this..


If you go on to this tutorial you will notice that i put a highlighted color on the text so that you will recognize which one will you copy, paste and replace just follow the three steps.

"Blue color is the HTML you copy"...

"Green highlighted color is the one you paste"...

"Yellow color is the one you change or replace"...

Understanding on what your doing can make your job easier in template there are 3 basic wrapper namely is the...

"#outer-wrapper" – referring to the entire blog

"#main-wrapper" – referring to the main Blog Posts

"#sidebar-wrapper" – referring to the right sidebar.

Putting the left Sidebar.

Scroll down and search for “ #sidebar-wrapper ” Copy the blue highlighted HTML code and paste it immediately after it, but don't forget to rename the second one. Replace the yellow highlighted color to " #leftsidebar-wrapper { " also the " right " to " left " as shown below.


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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: 220px;
float: right;
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 */
}

#leftsidebar-wrapper {
width: 220px;
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 */
}




Editing and Expanding wrapper

After that adjust the width settings of all the wrappers.

For the outer-wrapper 960px, for main-wrapper 470px.
You can of course change these values, as long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.


Now put a margin on the left of the " main-wrapper " to allow some space to the leftsidebar put this HTML code " margin-left: 25px; " below of " width: 470px; ", it shown like this...




#outer-wrapper {
width:960px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 470px;
margin-left: 25px;
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: 220px;
float: right;
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 */
}

#leftsidebar-wrapper {
width: 220px;
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 */
}

Adjust the width of "Header" and "Footer".

Now you have to widen your " header-wrapper " and your " footer " to align it to your layout. the normal side of the header and the footer is " 660 " for my sample it is 960, but if you want to change these value that's fine if you want a smaller header-wrapper and footer or bigger it's ok. scroll down and find this...



#header-wrapper {
width:660px;


#footer {
width:660px;

change it to this...

#header-wrapper {
width:950px;

#footer {
width:950px;



Where to place the New Sidebar

When your done, scroll down again and search for this HTML code, " <div id='main-wrapper'> " you have to add the highlighted green color above this code <div id='main-wrapper'> if you put it right it will probably show on the leftsidebar, but if you want your post to be on the left and the two sidebar on the right do the sample below also...

Left Sidebar = Post = Right Sidebar
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>




Post = Left Sidebar = Right Side bar

<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Click preview and when your satisfy save it. Where done putting the left Sidebar or making it as a 3 column template, Now let's edit the " Page elements " we have to align it so that it will not exceed on the box editor and let's add more " Add a Page element " you can see the picture below.

Here's the picture sample of how the Page element will look like if your done editing it, see picture below I put some circle on how many is the " Add a Page Element " and the layout is fix inside the box already.

Refer to my next post on 3 Column Minima Templates for blogger part2".