Tips to Add Column on New Blogger Layout

Because of so many questions about, “How do we add column on the blog?” Finally, I decide to spent a little of my time to write this article. Actually, adding a new column to our blog doesn’t so hard. But still, we need bit knowledge to do that.
In this chance, I will explain to you about, “how to make a column without images help.” As usual, I will just use template Minima, you know that, this is official template which provide by Blogger and don’t use any picture.
Based on standardizations from Blogger Template, we will know that, a template must have three main elements. That is:

• Header Element
• Outer Element
• Footer Element

For Outer, it’s divided again into:

• Main Element. This is the element where we can save posting. So, any posting that we send to our blog will be shown here.
• Sidebar Element. This is the elements to save any blog tools either accessory that we want, in order to decorate our blog.

From dissatisfaction from ‘only one sidebar’, if somehow we want to add some additional sidebar, we need to add it manually. I’ll clear it for you. I’ll show you an original template code from template Minima (New Template/XML)

 
  

  









#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;


}
#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}
#header { 

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}
#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;


font: $pagetitlefont;

}
#header a {

color:$pagetitlecolor;

text-decoration:none;

}
#header a:hover {

color:$pagetitlecolor;

}
#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;


text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}
#header img {

margin-left: auto;

margin-right: auto;

}


/* Outer-Wrapper

------------------------------------------ */


#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 */


}


/* Headings

------------------------------------------- */
h2 {

margin:1.5em 0 .75em;

font:$headerfont;


line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}


/* Posts


------------------------------------------ */

h2.date-header {

margin:1.5em 0 .5em;

}
.post {

margin:.5em 0 1.5em;


border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;


font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}
.post h3 a, .post h3 a:visited, .post h3 strong {


display:block;

text-decoration:none;

color:$titlecolor;

font-weight:normal;

}
.post h3 strong, .post h3 a:hover {


color:$textcolor;

}
.post p {

margin:0 0 .75em;

line-height:1.6em;

}
.post-footer {

margin: .75em 0;

color:$sidebarcolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;


line-height: 1.4em;

}
.comment-link {

margin-left:.6em;

}

.post img {


padding:4px;

border:1px solid $bordercolor;

}

.post blockquote {

margin:1em 20px;

}


.post blockquote p {

margin:.75em 0;

}
/* Comments

-------------------------------------------- */

#comments h4 {


margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;


}
#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block .comment-author {


margin:.5em 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}

#comments-block .comment-footer {


margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {


margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}
#blog-pager-newer-link {

float: left;

}



#blog-pager-older-link {

float: right;

}
#blog-pager { 

text-align: center;

}
.feed-links {

clear: both;

line-height: 2.5em;

}
/* Sidebar Content

------------------------------------------ */

.sidebar { 

color: $sidebartextcolor;

line-height: 1.5em;

}
.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {


margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}
.sidebar .widget, .main .widget { 


border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}
.main .Blog { 

border-bottom-width: 0;


}


/* Profile 

------------------------------------------- */

.profile-img { 

float: left;

margin: 0 5px 5px 0;


padding: 4px;

border: 1px solid $bordercolor;

}
.profile-data {

margin:0;

text-transform:uppercase;


letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.6em;

}
.profile-datablock { 

margin:.5em 0 .5em;

}
.profile-textblock { 

margin: 0.5em 0;

line-height: 1.6em;

}
.profile-link { 

font: $postfooterfont;

text-transform: uppercase;

letter-spacing: .1em;

}
/* Footer

-------------------------------------------- */


#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;


text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}
/** Page structure tweaks for layout editor wireframe */

body#layout #header { 


margin-left: 0px;

margin-right: 0px;

}

]]-->

  








skip to main  |

skip to sidebar





















  

From the code that I show to you, the one that we need to keep track of are some codes around Outer-Wrapper:

/* Outer-Wrapper
------------------------------------------ */
#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 */
}

Like what I’ve told you before, that Outer-Wrapper is a place to save main-wrapper and sidebar-wrapper. So, if you want to add a new column, or in other words, new sidebar, then something that we need to do first is adding column width from Outer-Wrapper itself.

Then, “How could we add a new column?” The first thing that you need to think about is, “how much longer width of my new column?” Okay, to make this thing clearer, I will take an example, width that we going to work for is 180 pixel, so we do need to change width of Outer-Wrapper, so we can estimate that width of our Outer-Wrapper is: 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel. For some spaces, let’s give it plus 10 pixels, so we got 840 pixel widths for our sidebar. To add new side bar code, please look at the example below.

#newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Then, if we add the code, it will be like this.

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
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;
padding-left:10px; word-wrap: break-word;
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

That is the first step that we do. The second step is to make code that will be placed in body. As example on template that I just write, code id for sidebar are like this:

Our next duty is placing code for new id sidebar that we going to do. The code would be like this.

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> </b:section> </div>

Then, after we mix it, just save new sidebar code under original sidebar code. The code would be like this.

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

Our new column already created. Want to make it more interesting? Then we should change the header width and footer width, with exactly same pixel as the Outer-Wrapper that is 840 pixels.

Still doesn’t get it?

In order to understand what I told you clearly, just give it a try. Make a new blog for the experiment (don’t use your main blog to this experiment!). Choose the usual Minima template. Are you ready? Let’s keep moving!

• login in on Blogger
• Click Layout
• Click Edit HTML tab.
• Just keep in mind! Never give a tick in white little box beside sentence Expand Widget Template. Once again, don’t give it a tick, or you will see pretty annoying widget codes.
• Find out code like this:
  
  
  
  #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
  
  
  

• Change value 660px with 840px, so the code will be like this.
  
  
  
  #header-wrapper { width:840px; margin:0 auto 10px; border:1px solid $bordercolor; }
  
  

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

• Change value 660px with 840px, so the code will be like this.
  
  
  
  #outer-wrapper { width: 840px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
  
  

• Find the code below :
  
  
  
  
  
  #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 */ }
  
  

• Copy and paste this code exactly below the previous code :
  
  
  #newsidebar-wrapper { width: 180px; float: right; psdding-left:10px; word-wrap: break-word; overflow: hidden; }

• Find the code below  :
  
  
  
  #footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }
  
  

• Change value 660px with 840px, so the code will be like this.
  
  
  #footer { width:840px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }
  
  
  

• Find the code below  :
  
  
  
  <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Profile1' locked='false' title=About Me' type='Profile'/> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> </b:section> </div>
  
  

• Copy and paste this code exactly below the previous code :
  
  
  <div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'/> </div>
  
  

• Click Save Template button

• Well, it’s done!

To see the result, just click Page Element, does it already work and become 3 columns or not. If it’s already done, feel free to fill up that side bar with anything you want to, and see the real result.

Steps that I mention to you before was just basic methods. To add other variations, you will need more knowledge and creativity. For make sure of you about what I explained to you, here, you can see the example. click here!

Good luck!