How To Make a 3 Column Template on Blogspot

	Share
Tweet

If you feel boring with your 2 column blog template and want to make it to 3 column template. HOW-TO HOUSE will bring you the tutorial here. Well, let's get started, "How To Make a 3 Column Template on Blogspot''.

Let's start :

• Go to the Settings tab > Permission tab. Change blog permissions and restrict it. So only authors can see it as we don't want anyone viewing it while you coding your blog page.

• Now it's time to working with the code. Go to the Layout > Edit HTML. First you need to expand the width of the outer-wrapper, to put new column.

• and change the width from 660px to 980px.
  
  
  

• Do the same for the header, unless you want your blogs header to stay the same width : 660px.
  
• Now copy the following
  

  #sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}



• Then, add it to your template (screenshot)

•  Now, add the XHTML code for the new column so copy the following code  :
  

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

• Put it between the content-wrapper and the main-wrapper. (screenshot)

• Now add a margin to the left of the main-wrapper. So it pushes the main post into about the center of the page, also adjust the width of the main-wrapper from 410px to 460px
  

• If you would like to center your blog description, remove the 



  max-width:700px;

  
  from the CSS code within the description class (screenshot)

• Now you need to add this final code and you're DONE!!
  

  /* tweaks for wireframe */
body#layout *{margin:0;padding:0;}
body#layout,body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:40%;}

  
  
  
  
  
  
• Save your template. Your page elements tab should look like this.
  
  
  
  
  
  

 Now your finished and got your 3 column template for your blog.

Enjoy!!