Como adicionar uma coluna lateral no blogger/blogspot

Para o tutorial vou usar como exemplo o template Mínima padrão do blogger. O template é constituído por 2 colunas, sendo uma lateral (sidebar-wrapper) e uma coluna destinada às postagens (main-wrapper).

Antes de começar você deve conhecer melhor as mudanças que iremos realizar. Então segue um breve resumo das mudanças propriamente ditas.

Para a adição de uma nova coluna em primeiro lugar deveremos checar a outer-wrapper. Bom, na outer-wrapper está presentes todos os elementos da página, ou seja, é a largura total da página. Por conta disso deveremos encontrar um tamanho certo para a outer-wrapper, caso contrário ao adicionar a coluna pode ocorrer erros. O mais frequente é a sidebar recém adicionada descer “template abaixo”.

No caso do template mínima a largura (width) da outer-wrapper é de 660px, bom isso veremos melhor mais adiante.

A outra div que iremos utilizar é a sidebar-wrapper, ou seja, a coluna original do template. No minima a sua largura é de: 220px. Então para ficar proporcional deveremos adicionar outra coluna da mesma largura (220px).

Resta-nos agora a main-wrapper, ou seja, a coluna do post. No template mínima sua largura chega a: 410px.

Finalizando, para encontrar o valor da outer-wrapper, deveremos somar: A largura da sidebar duas vezes (220 + 220) ou seja, a sidebar-wrapper e nova sidebar que terá o mesmo tamanho; Mais a largura da main-wrapper (410px). Ficará assim: 220 + 220 + 410 = 850px – largura que a outer-wrapper deve ter, lembrando que isso no template minima, faça o mesmo processo dos valores citados acima no seu template.

Agora vamos ao trabalho:
Anotado os valores que encontramos é hora de colocá-los em prática. Entre no editor HTML do seu template e procure primeiramente por: #outer-wrapper {

O valor que encontrei depois das somas no template mínima foi 850px; Substituindo ficará da seguinte maneira:

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

Copie o seguinte código da nova sidebar:

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

E cole abaixo da  #sidebar-wrapper {
Ficando assim:

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

Pronto, agora pra finalizar cole o seguinte trecho acima de:  <div id=’main-wrapper’>

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

Pronto, é muito fácil, porém requer muita atenção. Qualquer dúvida poste um comentário abaixo que será um prazer ajudar. Até a próxima.