- shorten links and earn money!

How To Make a 3 Column Template on Blogspot

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'/>
  • 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 


    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.



Post a Comment

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.