Adicionando uma nova coluna no Blogger

Várias pessoas me enviaram emails com dúvidas de novas colunas no Blogger. Está aqui para quem quer ter mais de uma coluna em seu blog. Neste tutorial usei o template minima, o template básico do Blogger.

Faça sempre o backup de seu template antes de mecher nele! Não sabe fazer backup? Clique aqui!

Agora vá em seu blog, “Layout” > “Editar HTML” e procure o seguinte trecho:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

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

/* Headings
----------------------------------------------- */

Agora substitua tudo isso por:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
background: #ffffff;
font: normal normal 100% Georgia, Serif;
}
#main-wrapper {
width: 500px;
margin: 2px;
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;
margin: 2px;
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 */
}
#newsidebar-wrapper {
width: 220px;
margin: 2px;
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 */
}
/* Headings
----------------------------------------------- */

Salve.

Copie este código:

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

Se você quizer suas colunas uma ao lado da outra, cole o código acima ANTES de:

<div id='sidebar-wrapper'>

Agora se você quer as suas colunas em lados opostos, cole o codigo acima ANTES de:

<div id='main-wrapper'>

Agora salve.

Seu header (cabeçalho) ficou pequeno?
Substitue:

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Por:

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

O seu footer ficou pequeno?
Substitua:

/* 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;
}

Por:

/* Footer
----------------------------------------------- */
#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Aula básica para quem não sabe os tags de HTML acima:

Header é o cabeçalho da página. Onde fica o logo do seu blog.

Outer-Wrapper é a página toda.

Main-Wrapper é a coluna onde fica as postagens.

Sidebar é a coluna de perfil. Onde fica os gadgets.

Footer é aperte de baixo da página. O fim da página.

Aprenda o básico de HTML do blogger clicando aqui!